jquery判断鼠标是否在div里的三种方法及具体实例演示推荐 亲测 原创

文章标签: event
  • :
  • 03-10 20:24
  • :
  • 610次
  • :
  • 0条
  • 2赞

简介在jquery里,我们要判断鼠标是否位于div里的三种方法,及具体的实例演示。

本文站长和大家分享一下,如果在jquery里来判断鼠标是否在div之内

第一种方法:用 $.contains 来判断:

$.contains是jquery里用来判断一个标签是否包含另一个标签的方法,可以参考站长以前写的这篇文章:jquery里判断一个标签元素是否包含另一个标签元素,即一个标签元素是否为另一个标签元素的子标签的方法

//$.contains的语法结构为:
$.contains(容器,要判断的标签元素);

要注意的,$.contains的两个参数必须为dom对象,不能是jquery对象!【关于js的dom对象和jquery对象,看这篇:jquery对象与dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法

来看用$.contains来判断鼠标是否处于div之内的具体代码:

if($.contains($("#aijquery")[0],e.target) || $("#aijquery")[0]==e.target){
    $(".info").text("鼠标在这个DIV里");
}else{
    $(".info").text("鼠标不在这个DIV里");
}
//原创 爱jQuery www.aijquery.cn

上面实例里,#aijquery 就是要判断的DIV,e.target是鼠标触发的节点。

要判断鼠标是否位于div#aijquery之内,先$.contains来判断,鼠标所触发的节点是否被包含在div#aijquery内,然后再判断鼠标触发的节点是否就是当前的div#aijquery节点,这两种情况下,鼠标都处在div之内,下面是具体的在线演示的地址:

jquery判断鼠标是否在div内的在线演示

第二种方法:使用mouseover和mouseout:

当鼠标指针位于元素上方时,会发生 mouseover 事件,当鼠标指针从元素上移开时,发生 mouseout 事件。

PS:和 mouseenter/mouseleave 事件不同,不论鼠标指针进入/离开被选元素还是任何子元素,都会触发 mouseover/mouseout 事件。只有在鼠标指针进入/离开被选元素时,才会触发 mouseenter/mouseleave 事件。

$("#aijquery").mouseover(function(){
    $(".primary").text("方法二:鼠标在这个DIV里");
}).mouseout(function(){
    $(".primary").text("方法二:鼠标不在这个DIV里");
});

缺点:在页面初始化时,也就是刚打开页面时,是判断不出来的,只有把鼠标移上div上一次,激活了mouseover事件后,才能判断,具体可以看上面给的那个在线实例演示。

第三种方法:最传统的方法,也就是通过X、Y坐标来判断:

var x=e.clientX;
var y=e.clientY;
var div_x_1 = $("#aijquery").offset().left;
var div_y_1 =  $("#aijquery").offset().top;
var div_x_2 = $("#aijquery").offset().left+$("#aijquery").outerWidth();
var div_y_2 =  $("#aijquery").offset().top+$("#aijquery").outerHeight();
if( x < div_x_1 || x > div_x_2 || y < div_y_1 || y > div_y_2){
    $(".danger").text("方法三:鼠标不在这个DIV里");
}else{
    $(".danger").text("方法三:鼠标在这个DIV里");
}

好了,关于判断鼠标是否在DIV内的三种方法,就整理到这里了,上面的三种方法,都在第一个方法后面提供的那个在线实例演示里,大家可以点开自己测试查看。



您正在找的文章可能是: