javascript 有什么方法可以禁用某些 DOM 元素捕获鼠标事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4305690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to disable some DOM element from capturing mouse events?
提问by tester
I have an element which is on top of another element. I want to capture the mouseoverevent with the bottom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseoverevents.
我有一个位于另一个元素之上的元素。我想mouseover用底部元素捕获事件，但是当鼠标光标位于顶部元素上时，底部元素没有接收mouseover事件。
Is there any way to disable the top element from receiving mouse events?
有没有办法禁止顶部元素接收鼠标事件？
回答by Ryan Rapp
Elements can be easily disabled from receiving mouse events using, in your example, the following CSS:
在您的示例中，可以使用以下 CSS 轻松禁用元素接收鼠标事件：
#region2 {
pointer-events: none;
}
For more discussion, see this SO post.
有关更多讨论，请参阅此 SO 帖子。
回答by Brad Christie
This is the best I can come up with. You could probably get pretty elaborate, but (to my knowledge) the greater z-index is always going to capture the event. You CAN, however, work around it but you're probably better off refactoring in to another function with either a supplied (or unsupplied) offset value so you can keep '#region' in mind when the events are transpiring. You can also use e.target to check what is sending you the event (see http://api.jquery.com/category/events/for more properties)
这是我能想到的最好的方法。您可能会非常详细，但（据我所知）更大的 z-index 总是会捕获事件。但是，您可以解决它，但最好使用提供的（或未提供的）偏移值重构为另一个函数，以便在事件发生时记住“#region”。您还可以使用 e.target 来检查向您发送事件的内容（有关更多属性，请参见http://api.jquery.com/category/events/）
$('#region2').mousemove(function(e){
var regionPos = $('#region').position();
var region2Pos = $('#region').position();
var offset = {
left: region2Pos.left - regionPos.left,
top: region2Pos.top - regionPos.top
};
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + (e.clientX + offset.left) + ", " + (e.clientY + offset.top) + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
editsecond solution:
编辑第二个解决方案：
<!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"> </span>
<span id="inside"> </span>
</p>
<div id="region"><div id="region3"></div></div>
<div id="region2"></div>
</body>
</html>
