Javascript 有没有办法禁止某些DOM元素捕获鼠标事件？_Javascript_Css_Mouseevent

Javascript 有没有办法禁止某些DOM元素捕获鼠标事件？

javascript css

Javascript 有没有办法禁止某些DOM元素捕获鼠标事件？,javascript,css,mouseevent,Javascript,Css,Mouseevent,我有一个元素，它位于另一个元素之上。我想用底部元素捕获mouseover事件，但当鼠标光标位于顶部元素上时，底部元素不会接收mouseover事件有没有办法禁止top元素接收鼠标事件？这是我能想到的最好办法。你可能会做得很详细，但（据我所知）更大的z指数总是会捕捉到事件。但是，您可以解决这个问题，但最好是使用提供的（或不提供的）偏移量值重构到另一个函数中，以便在事件发生时记住“区域”。您还可以使用e.target检查向您发送事件的内容（有关更多属性，请参阅）编辑第二种解决方案： <!

我有一个元素，它位于另一个元素之上。我想用底部元素捕获

mouseover

事件，但当鼠标光标位于顶部元素上时，底部元素不会接收

mouseover

事件

有没有办法禁止top元素接收鼠标事件？

这是我能想到的最好办法。你可能会做得很详细，但（据我所知）更大的z指数总是会捕捉到事件。但是，您可以解决这个问题，但最好是使用提供的（或不提供的）偏移量值重构到另一个函数中，以便在事件发生时记住“区域”。您还可以使用e.target检查向您发送事件的内容（有关更多属性，请参阅）

编辑第二种解决方案：

<!DOCTYPE html>
<html>
<head>
  <style>
  #region { width:220px; height:170px; margin;10px; margin-right:50px;
        background:yellow; border:2px groove; float:right; }
  #region2 {
    background-color: white;
    float:right;
    position: relative;
    right: -150px; top: 50px;
    width: 100px; height: 100px;
    border: 1px solid
  }

  #region3 {
    width:30px;
    height: 30px;
    background-color: brown;
  }

  p { margin:0; margin-left:10px; color:red; width:220px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <script type="Text/javascript">
    jQuery.extend({
      MousemoveElement: function(needle,onActivation){
        var elList = needle;
        $('*').mousemove(function(e){
          $('#outside').html('<b>Outside:<b/><br />target: '+e.target.tagName+' ['+e.target.id+']<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY);
          $('#inside').html('');

          if (onActivation==null)
            return;// only search if we need to

          $(needle).each(function(){
            $('#meta').html('outside');
            var pt = { x: e.pageX, y: e.pageY };
            var ext = {
              left: $(this).offset().left,
              right: ($(this).offset().left + $(this).innerWidth()),
              top: $(this).offset().top,
              bottom: ($(this).offset().top + $(this).innerHeight())
            };
            $('#meta').html('<b>PT:</b> '+pt.x+','+pt.y+'<br /><b>EXT:</b> ('+ext.left+','+ext.top+';'+ext.right+','+ext.bottom+')');
            if ((pt.x >= ext.left) && (pt.x <= ext.right) && (pt.y >= ext.top) && (pt.y <= ext.bottom)){
              $('#meta').html('GOOD');
              onActivation(e,$(this));
            }
          });
        });
      }
    });

    $(document).ready(function(){
      $.MousemoveElement('#region',function(e,element){
        $('#inside').html('<b>Inside:<b/><br />target: '+element.attr('id')+'<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY);
        $('#outside').html('');
      });
    });
  </script>
</head>
<body>
    <p>
      Try scrolling too.
      <span id="meta">Move the mouse over the div.</span>
      <span id="outside">&nbsp;</span>
      <span id="inside">&nbsp;</span>
    </p>

    <div id="region"><div id="region3"></div></div>
    <div id="region2"></div>
</body>
</html>


#区域{宽度：220px；高度：170px；边距；10px；右边距：50px；
背景：黄色；边框：2px凹槽；浮动：右侧；}
#区域2{
背景色：白色；
浮动：对；
位置：相对位置；
右：-150px；顶部：50px；
宽度：100px；高度：100px；
边框：1px实心
}
#区域3{
宽度：30px；
高度：30px；
背景颜色：棕色；
}
p{边距：0；左边距：10px；颜色：红色；宽度：220px；
高度：120px；衬垫顶部：70px；
浮点：左；字体大小：14px；}
span{显示：块；}
jQuery.extend({
MousemoveElement：功能（指针、激活）{
var elList=针；
$（'*'）.mousemove（函数（e）{
$（'#outside'）.html（'outside:
目标：'+e.target.tagName+'['+e.target.id+']
客户端：'+e.clientX+'，'+e.clientY+'
页面：'+e.pageX+'，'+e.pageY）；
$（'#inside'）.html（''）；
if（onActivation==null）
return；//仅在需要时搜索
$（针）。每个（函数（）{
$（'#meta'）.html（'outside'）；
var pt={x:e.pageX，y:e.pageY}；
var ext={
左：$（this）.offset（）.left，
右：（$（this.offset（）.left+$（this.innerWidth（）），
top:$（this）.offset（）.top，
底部：（$（this.offset（）.top+$（this.innerHeight（））
};
$（'#meta'）.html（'PT:'+PT.x+'，'+PT.y+'
EXT:（'+EXT.left+'，'+EXT.top+'；'+EXT.right+'，'+EXT.bottom+'））；
在您的示例中，如果（（pt.x>=ext.left）&&&（pt.x=ext.top）&&（pt.y元素可以使用以下CSS轻松地禁用它们接收鼠标事件：
#region2 {
    pointer-events: none;
}

有关更多讨论，请参阅。
我已经读了好几遍了，但仍然不太明白您的要求。请不要使用诸如“初始元素”之类的模糊术语，你能不能说，使用你提供的例子，你希望这个行为是什么？你的意图是避免区域2发生鼠标事件，还是你想出了一个旁路？编辑我想我现在明白了，你希望区域2停止干扰区域的鼠标，对吗？（对不起，咖啡剥夺）是的，Brad你是对的，谢谢你的关注！可能是Brad的复制品，谢谢你的帮助！但我需要逻辑在$（'#region'）.mousemove…例如：$（'#region2'）.mousemove（函数（E）{$（'#region'）.trigger（E）；}）；我建议您创建自己的jQuery函数jQuery.fn.CustomMousemove=function（myTarget）{$（this）.mousemove（function（e）{…}）；…}
然后根据所选内容处理自己的操作。然后您可以将所有代码放在一个结论性区域中，并调用$（'#region，#region2'）。CustomMousemove（'#region'））
并让所有活动只影响#地区。好吧，布拉德，再次感谢。实际问题是赚美元（#地区）.mousemove将在鼠标移动到其身体上方时执行，即使它位于数千个绝对定位的div后面…我不认为有任何方法可以执行此操作，但我可能不知道解决方案…好吧，经过一些研究，在我看来唯一的解决方案是将所有顶部div移动到#区域Brad…我很抱歉告诉你，但是这样的解决方案会消耗大量CPU资源…在鼠标指针悬停在任何位置时检查CPU的使用情况。鼠标指针不应总是绑定在这么多元素上。+1非常感谢您提供了这样一个既好又简单的解决方案：）它解决了我在OpenLayers
上弹出的问题，我在mouseovermarker上显示它。我在jQuery/css库中尝试了一切，直到找到了它。很有魅力。当对象聚焦时键盘事件如何？注意，这在ActionScript 3中已经很容易做到十年了（）“指定此对象是否接收鼠标或其他用户输入、消息。”，但在JavaScript.WTaF中似乎仍然不可能。与Flash中的AS3显示层次结构（InteractiveObject>DisplayObject>EventDispatcher）.CSS“指针事件”相比，DOM将配对"似乎是对AS3的mouseEnabled的剽窃，但未能禁用其他输入事件。请注意，如果元素上的指针事件设置为“无”，则您无法与其交互，例如，如果有超链接，则无法单击。太棒了！我在Javascript中搜索了数小时！CSS是我最不希望找到超链接的地方回答！
#region2 {
    pointer-events: none;
}