devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-05-02 21:33:38

赞

踩

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

顺便整理一下各种触发

  • js触发 

    页面加载事件（onload），鼠标双击事件（ondbclick）

    1. window.onload=function(){
    2.                 //绑定元素,执行对应事件 鼠标双击(ondblclick)
    3.                 //鼠标双击事件ondblclick
    4.                 document.getElementById('d2').ondblclick=function(){
    5.                     alert('我是双击显示的');
    6.                 }
    7.             }

    鼠标点下（onmousedown）事件（点下去就执行，鼠标无需抬起）

    1.             window.onload=function(){
    2.                 //绑定元素,执行鼠标点下操作  鼠标点下(onmousedown)
    3.                 document.getElementById('d3').onmousedown=function(){
    4.                     alert('我是鼠标点下提示');
    5.                 }
    6.             }

    鼠标抬起（onmouseup）事件（点下后，然后鼠标回弹才执行）

    1.             window.onload=function(){
    2.                 //绑定元素,执行鼠标抬起事件   鼠标抬起(onmouseup)
    3.                 document.getElementById('d4').onmouseup=function(){
    4.                     alert('鼠标抬起的提示');
    5.                 }
    6.             }

    鼠标移动（onmousemove）事件

    1.             window.onload=function(){
    2.                 //绑定元素,执行鼠标移动事件   鼠标移动(onmousemove)
    3.                 document.getElementById('d5').onmousemove=function(){
    4.                     alert('鼠标移动的提示');
    5.                 }
    6.             }

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

    1.             window.onload=function(){
    2.                 //绑定元素,执行鼠标移入事件   鼠标移入(onmousemove)
    3.                 document.getElementById('d6').onmouseover=function(){
    4.                     alert('鼠标移入操作');
    5.                 }
    6.             }

    鼠标移出（onmouseout）事件    

    1.             window.onload=function(){
    2.                 //绑定元素,执行鼠标移出事件   鼠标移出(onmouseout)
    3.                 document.getElementById('d7').onmouseout=function(){
    4.                     alert('鼠标移出操作');
    5.                 }
    6.             }

  • JQ触发      

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

    1. $('button').click(function() {  
    2.     alert('你点击了按钮！');  
    3. });


    mouseenter 和 mouseleave 事件
    当鼠标指针进入或离开一个元素时触发。

    1. $('#myElement').mouseenter(function() {  
    2.     alert('鼠标进入了元素！');  
    3. }).mouseleave(function() {  
    4.     alert('鼠标离开了元素！');  
    5. });


    3. mousedown 和 mouseup 事件
    当用户在元素上按下或释放鼠标按钮时触发。

    1. $('#myElement').mousedown(function() {  
    2.     alert('鼠标按钮被按下！');  
    3. }).mouseup(function() {  
    4.     alert('鼠标按钮被释放！');  
    5. });


    4. mousemove 事件
    当鼠标指针在元素内部移动时触发。

    1. $('#myElement').mousemove(function(event) {  
    2.     alert('鼠标位置：X=' + event.pageX + ', Y=' + event.pageY);  
    3. });


    5. hover 事件
    这是 mouseenter 和 mouseleave 的便捷方法。

    1. $('#myElement').hover(  
    2.     function() {  
    3.         alert('鼠标进入了元素！');  
    4.     },  
    5.     function() {  
    6.         alert('鼠标离开了元素！');  
    7.     }  
    8. );


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

    1. $(document).ready(function() {  
    2.     $('#myElement').on('click', function(event) {  
    3.         var x = event.pageX;  
    4.         var y = event.pageY;  
    5.         alert('你在位置 X=' + x + ', Y=' + y + ' 点击了元素！');  
    6.     });  
    7. });

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

  1.  
  2.  
  3. $("#myDiv").css("position", "relative").append("<div class='overlay'></div>");
  4.  
  5.  
  6.   // 样式可自行修改
  7. .overlay {
  8.   position: absolute;
  9.   top: 0;
  10.   left: 0;
  11.   width: 100%;
  12.   height: 100%;
  13.   background-color: rgba(0, 0, 0, 0.5);
  14.   pointer-events: none;
  15. }

  • 我的实现

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

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

  • 第一种办法 ：
  1.  var isMouseOver = false;
  2.             $('.tablediv1').on('mouseover', function() {
  3.                 var $this = $(this);
  4.                 if (!isMouseOver) {
  5.                     isMouseOver = true;
  6.                     $this.css("position", "relative").append("<div class='overlay'></div>");
  7.                     console.log('鼠标移入操作');
  8.                     // 一次性绑定需要阻止的事件
  9.                     $this.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll', function(e) {
  10.                         e.preventDefault();
  11.                         e.stopPropagation();
  12.                         console.log('鼠标移入阻止的事件');
  13.                         return false;
  14.                     });
  15.                 }
  16.             }).on('mouseout', function() {
  17.                 var $this = $(this);
  18.                 isMouseOver = false;
  19.                 // 在鼠标移出时，可以考虑移除之前绑定的事件处理器，恢复交互能力
  20.                 $this.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll');
  21.                 console.log('鼠标移出阻止的事件');
  22.                 $('.overlay', $this).remove(); // 移除之前添加的overlay元素
  23.             });

  • 第二种办法：

  1.  
  2. <div id="myDisabledDiv" class="layui-layer-wrap">
  3.     内容 
  4. </div> 
  5.  
  6.  
  7. ===================================
  8.  
  9.  
  10. #myDisabledDiv.disabled {
  11.     pointer-events: none;
  12.     opacity: 0.6;
  13.     user-select: none;
  14. }
  15.  
  16.  
  17. ===================================
  18.  
  19.  
  20.  
  21.  
  22.  
  23. // 初始化时检查是否需要禁用
  24.     disableDivWhenNeeded('#myDisabledDiv');
  25.  
  26.     // 假设有一个按钮用于切换禁用状态
  27.     $('#toggleDisable').click(function(){
  28.         var div = $('#myDisabledDiv');
  29.         if(div.hasClass('disabled')){
  30.             div.removeClass('disabled');
  31.             enableDivEvents(div);
  32.         } else {
  33.             div.addClass('disabled');
  34.             disableDivEvents(div);
  35.         }
  36.     });
  37. });
  38.  
  39. function disableDivEvents(div) {
  40.     div.on('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu', function(e){
  41.         e.preventDefault();
  42.         e.stopPropagation();
  43.         return false;
  44.     });
  45. }
  46.  
  47. function enableDivEvents(div) {
  48.     div.off('mousedown touchstart keydown wheel mousewheel DOMMouseScroll contextmenu');
  49. }
  50.  
  51. function disableDivWhenNeeded(divSelector) {
  52.     // 根据你的业务逻辑判断是否需要禁用
  53.     var shouldDisable = true; // 这里替换成你的条件判断
  54.     if (shouldDisable) {
  55.         $(divSelector).addClass('disabled');
  56.         disableDivEvents($(divSelector));
  57.     }
  58. }

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

第三种办法：

  1.  
  2.  
  3.     // 初始化时检查是否需要禁用
  4.     disableDivWhenNeeded('#myDisabledDiv');
  5.  
  6.     // 假设有一个按钮用于切换禁用状态
  7.     $('#toggleDisable').click(function(){
  8.         var div = $('#myDisabledDiv');
  9.         if(div.hasClass('disabled')){
  10.             div.removeClass('disabled');
  11.             enableDivEvents(div);
  12.         } else {
  13.             div.addClass('disabled');
  14.             disableDivEvents(div);
  15.         }
  16.     });
  17. });
  18.  
  19. function addPassiveEventListener(element, eventName, handler) {
  20.     element.addEventListener(eventName, handler, { passive: true });
  21. }
  22.  
  23. function removePassiveEventListener(element, eventName, handler) {
  24.     element.removeEventListener(eventName, handler, { passive: true });
  25. }
  26.  
  27. function disableDivEvents(div) {
  28.     addPassiveEventListener(div.get(0), 'wheel', function(e){
  29.         e.preventDefault();
  30.         e.stopPropagation();
  31.         return false;
  32.     });
  33.     addPassiveEventListener(div.get(0), 'touchstart', function(e){
  34.         e.preventDefault();
  35.         e.stopPropagation();
  36.         return false;
  37.     });
  38.     div.on('keydown mousewheel DOMMouseScroll contextmenu', function(e){
  39.         e.preventDefault();
  40.         e.stopPropagation();
  41.         return false;
  42.     });
  43. }
  44.  
  45. function enableDivEvents(div) {
  46.     removePassiveEventListener(div.get(0), 'wheel', null); // 注意这里第二个参数为null，因为我们不传递具体的handler
  47.     removePassiveEventListener(div.get(0), 'touchstart', null);
  48.     div.off('keydown mousewheel DOMMouseScroll contextmenu');
  49. }
  50.  
  51. function disableDivWhenNeeded(divSelector) {
  52.     // 根据你的业务逻辑判断是否需要禁用
  53.     var shouldDisable = true; // 这里替换成你的条件判断
  54.     if (shouldDisable) {
  55.         $(divSelector).addClass('disabled');
  56.         disableDivEvents($(divSelector));
  57.     }
  58. }

更换过后的触发 。。。。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/526224
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号