zoukankan      html  css  js  c++  java
  • jQuery判断鼠标是否在某个元素内

    方法一:

    以页面header为例:

    (判断鼠标是否在一级菜单里,如果不在一级菜单,是否在二级菜单)

    $('#header').mousemove(function(e){

    if($.contains($("#navUl")[0],e.target) || $("#navUl")[0]==e.target){
    // console.log('在menu中')
    }else{
    // console.log('不在menu中');
    if($.contains($("#submenu")[0],e.target) || $("#submenu")[0]==e.target){
    // console.log('在二级menu中')
    }else{
    // console.log('不在二级menu中');
    $("#navUl>li").removeClass('active');
    }
    }

    }

    (参考:jquery里判断一个标签元素是否包含另一个标签元素,即一个标签元素是否为另一个标签元素的子标签的方法

      摘自 爱jQuery:http://www.aijquery.cn/Html/jqueryhanshu/131.html

      http://www.aijquery.cn/Html/jqueryshili/182.html

    方法二: 传统方法: Jquery获取鼠标位置和判断鼠标是否在DIV中

    $(document).mousemove(function(e){ 
         x = e.pageX;
             y = e.pageY; 
    });
     
    //x的值相对于文档的左边缘。y的值相对于文档的上边缘
    //x,y是全局变量;
    //判断鼠标是否在某DIV中
    var div = $('.dream');//获取你想要的DIV
    var y1 = div.offset().top;  //div上面两个的点的y值
    var y2 = y1 + div.height();//div下面两个点的y值
    var x1 = div.offset().left;  //div左边两个的点的x值
    var x2 = x1 + div.width();  //div右边两个点的x的值
     
    if( x < x1 || x > x2 || y < y1 || y > y2){
        alert('鼠标不在该DIV中');
    }else{
        alert('鼠标在该DIV中');
    };

     

     

  • 相关阅读:
    JavaScript&DOM
    avalon.js的循环操作在表格中的应用
    merge()
    建立表空间以及用户
    SSI框架下,用jxl实现导出功能
    SQL递归查询实现组织机构树
    vue+webpack实践
    使用canvas绘制一片星空
    在canvas中使用html元素
    CSS3-transform 转换/变换
  • 原文地址:https://www.cnblogs.com/sherryweb/p/13130395.html
Copyright © 2011-2022 走看看