鼠标移入,移除等在div中触发事件遇到问题

顺便整理一下各种触发

js触发

页面加载事件(onload),鼠标双击事件(ondbclick)

复制代码
  window.onload=function(){
                  //绑定元素,执行对应事件 鼠标双击(ondblclick)
                  //鼠标双击事件ondblclick
                  document.getElementById('d2').ondblclick=function(){
                      alert('我是双击显示的');
                  }
              }

鼠标点下(onmousedown)事件(点下去就执行,鼠标无需抬起)

复制代码
              window.onload=function(){
                  //绑定元素,执行鼠标点下操作  鼠标点下(onmousedown)
                  document.getElementById('d3').onmousedown=function(){
                      alert('我是鼠标点下提示');
                  }
              }

鼠标抬起(onmouseup)事件(点下后,然后鼠标回弹才执行)

复制代码
              window.onload=function(){
                  //绑定元素,执行鼠标抬起事件   鼠标抬起(onmouseup)
                  document.getElementById('d4').onmouseup=function(){
                      alert('鼠标抬起的提示');
                  }
              }

鼠标移动(onmousemove)事件

复制代码
              window.onload=function(){
                  //绑定元素,执行鼠标移动事件   鼠标移动(onmousemove)
                  document.getElementById('d5').onmousemove=function(){
                      alert('鼠标移动的提示');
                  }
              }

鼠标移入(onmouseover)事件 只要在指定div中移动就会触发

复制代码
              window.onload=function(){
                  //绑定元素,执行鼠标移入事件   鼠标移入(onmousemove)
                  document.getElementById('d6').onmouseover=function(){
                      alert('鼠标移入操作');
                  }
              }

鼠标移出(onmouseout)事件

复制代码
              window.onload=function(){
                  //绑定元素,执行鼠标移出事件   鼠标移出(onmouseout)
                  document.getElementById('d7').onmouseout=function(){
                      alert('鼠标移出操作');
                  }
              }

JQ触发

click 事件

当用户点击一个元素时触发。

复制代码
  $('button').click(function() {  
      alert('你点击了按钮!');  
  });

mouseenter 和 mouseleave 事件

当鼠标指针进入或离开一个元素时触发。

复制代码
  $('#myElement').mouseenter(function() {  
      alert('鼠标进入了元素!');  
  }).mouseleave(function() {  
      alert('鼠标离开了元素!');  
  });

3. mousedown 和 mouseup 事件

当用户在元素上按下或释放鼠标按钮时触发。

复制代码
  $('#myElement').mousedown(function() {  
      alert('鼠标按钮被按下!');  
  }).mouseup(function() {  
      alert('鼠标按钮被释放!');  
  });

4. mousemove 事件

当鼠标指针在元素内部移动时触发。

复制代码
  $('#myElement').mousemove(function(event) {  
      alert('鼠标位置:X=' + event.pageX + ', Y=' + event.pageY);  
  });

5. hover 事件

这是 mouseenter 和 mouseleave 的便捷方法。

复制代码
  $('#myElement').hover(  
      function() {  
          alert('鼠标进入了元素!');  
      },  
      function() {  
          alert('鼠标离开了元素!');  
      }  
  );

6. 自定义鼠标事件处理

你还可以根据具体的业务需求,编写自定义的鼠标事件处理逻辑。

复制代码
  $(document).ready(function() {  
      $('#myElement').on('click', function(event) {  
          var x = event.pageX;  
          var y = event.pageY;  
          alert('你在位置 X=' + x + ', Y=' + y + ' 点击了元素!');  
      });  
  });

设置一个div样式 让看起来区域内是不可操作的

复制代码
$("#myDiv").css("position", "relative").append("<div class='overlay'></div>");


  // 样式可自行修改
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

我的实现

我的目的是在一块div中 移入 内部不能操作

同时我也禁用了 鼠标 、 键盘 、 触屏 等操作

  • 第一种办法 :

    var isMouseOver = false;
    ('.tablediv1').on('mouseover', function() { var this = (this); if (!isMouseOver) { isMouseOver = true; this.css("position", "relative").append("

    ");
    console.log('鼠标移入操作');
    // 一次性绑定需要阻止的事件
    this.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll', function(e) { e.preventDefault(); e.stopPropagation(); console.log('鼠标移入阻止的事件'); return false; }); } }).on('mouseout', function() { var this = (this); isMouseOver = false; // 在鼠标移出时,可以考虑移除之前绑定的事件处理器,恢复交互能力 this.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll');
    console.log('鼠标移出阻止的事件');
    ('.overlay', this).remove(); // 移除之前添加的overlay元素
    });

第二种办法:

复制代码
<div id="myDisabledDiv" class="layui-layer-wrap">
    内容 
</div> 


===================================


#myDisabledDiv.disabled {
    pointer-events: none;
    opacity: 0.6;
    user-select: none;
}


===================================





// 初始化时检查是否需要禁用
    disableDivWhenNeeded('#myDisabledDiv');

    // 假设有一个按钮用于切换禁用状态
    $('#toggleDisable').click(function(){
        var div = $('#myDisabledDiv');
        if(div.hasClass('disabled')){
            div.removeClass('disabled');
            enableDivEvents(div);
        } else {
            div.addClass('disabled');
            disableDivEvents(div);
        }
    });
});

function disableDivEvents(div) {
    div.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
}

function enableDivEvents(div) {
    div.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu');
}

function disableDivWhenNeeded(divSelector) {
    // 根据你的业务逻辑判断是否需要禁用
    var shouldDisable = true; // 这里替换成你的条件判断
    if (shouldDisable) {
        $(divSelector).addClass('disabled');
        disableDivEvents($(divSelector));
    }
}

由于都框架问题还有浏览器插件会拦截然后给了警告不能触发 就有了下面的

第三种办法:

复制代码
    // 初始化时检查是否需要禁用
    disableDivWhenNeeded('#myDisabledDiv');

    // 假设有一个按钮用于切换禁用状态
    $('#toggleDisable').click(function(){
        var div = $('#myDisabledDiv');
        if(div.hasClass('disabled')){
            div.removeClass('disabled');
            enableDivEvents(div);
        } else {
            div.addClass('disabled');
            disableDivEvents(div);
        }
    });
});

function addPassiveEventListener(element, eventName, handler) {
    element.addEventListener(eventName, handler, { passive: true });
}

function removePassiveEventListener(element, eventName, handler) {
    element.removeEventListener(eventName, handler, { passive: true });
}

function disableDivEvents(div) {
    addPassiveEventListener(div.get(0), 'wheel', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
    addPassiveEventListener(div.get(0), 'touchstart', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
    div.on('keydown mousewheel DOMMouseScroll contextmenu', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
}

function enableDivEvents(div) {
    removePassiveEventListener(div.get(0), 'wheel', null); // 注意这里第二个参数为null,因为我们不传递具体的handler
    removePassiveEventListener(div.get(0), 'touchstart', null);
    div.off('keydown mousewheel DOMMouseScroll contextmenu');
}

function disableDivWhenNeeded(divSelector) {
    // 根据你的业务逻辑判断是否需要禁用
    var shouldDisable = true; // 这里替换成你的条件判断
    if (shouldDisable) {
        $(divSelector).addClass('disabled');
        disableDivEvents($(divSelector));
    }
}

更换过后的触发 。。。。

相关推荐
QuantumStack1 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext1 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)2 小时前
后端快捷代码
java·开发语言
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
Jay_5152 小时前
C++多态与虚函数详解:从入门到精通
开发语言·c++
路来了2 小时前
Python小工具之PDF合并
开发语言·windows·python
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript