标准mouseout
事件的一个问题是它不仅在光标离开由元素的外部边界限制的屏幕区域时触发,而且当光标悬停在某个其他元素上时触发包含在这个范围内。
jQuery的mouseleave
事件的基本原理是仅在光标离开由元素的外部边界限定的区域时发出 的信号。
不幸的是,这似乎只有在"阻碍"元素是"阻碍"的后代。元件。如果"阻碍"元素是通过绝对定位的地方,然后当鼠标悬停在它上面时,{&#34}上的mouseleave
事件被阻塞了#34;元素被解雇了。
例如,使用以下HTML:
<div id="b-div">
<div id="d-div"><span>d</span></div>
</div>
<div id="c-div"><span>c</span></div>
... #d-div
是#b-div
的真正后裔,而#c-div
不是,但是,我们可以将其设置为“#{1}}。妨碍&#34; #b-div
都是一样的。这在this jsFiddle。
如果现在在#b-div
上定义了以下事件:
$( '#b-div' ).bind( {
mouseenter: function () {
$( this ).addClass( 'outlined' );
},
mouseleave: function () {
$( this ).removeClass( 'outlined' );
}
} );
...然后将鼠标悬停在#b-div
的外围区域会导致蓝色轮廓显示在此周边,除非鼠标悬停在#c-div
以上
使用#b-div
和#c-div
获得与mouseleave
和#b-div
达到同样效果的方法#d-div
和mouseover
mouseleave
事件的解决方案都必然会失败,因为真正的问题是要防止(或渲染无效)虚假{{1}在障碍元素上。
答案 0 :(得分:7)
根据您#c-div
完全包含#b-div
的{{1}}的初始帖子,这样做了:
$('#b-div, #c-div').on( {
mouseenter: function (ev) {
$('#b-div').addClass('outlined');
},
mouseleave: function (ev) {
$('#b-div').removeClass('outlined');
}
});
<小时/>
由于#c-div
可能并非始终完全包含#b-div
,因此如果您添加此样式,则可以使用现有代码:
#c-div {
pointer-events: none;
}
但这样就无法使用鼠标与#c-div
进行交互。
如果您 需要与#c-div
,和进行互动,那么它不完全在#b-div
内,您可以使用Element.getBoundingClientRect之类的这样:
$('#b-div, #c-div').on('mousemove mouseleave',
function(ev) {
var br= $('#b-div')[0].getBoundingClientRect();
$('#b-div').toggleClass(
'outlined',
ev.pageX > br.left && ev.pageX < br.left+br.width &&
ev.pageY > br.top && ev.pageY < br.top +br.height
)
}
);
答案 1 :(得分:0)
如果您无法使用Rich的Template.singleComment.helpers({
momentTime: function () {
return moment(this.createdAt).fromNow();
},
byWho: function(){
user = Meteor.users.findOne({_id: this.createdBy})
if(user){
return user.username;
} else {
return this.createdBy;
}
}
})
建议(也许您需要support IE 10,或者您确实需要与绝对定位的div进行互动),您可以手动检查事件不会pointer-events: none
使用relatedTarget
。
但是,您还必须检查#c-div
中的鼠标距离是否不会#c-div
。
#b-div
&#13;
$( '#b-div' ).bind( {
mouseenter: function () {
$( this ).addClass( 'outlined' );
},
mouseleave: function (e) {
if (e.relatedTarget.id == 'c-div' || $.contains(document.getElementById('c-div'), e.relatedTarget)) {
return;
}
$( this ).removeClass( 'outlined' );
}
} );
$( '#c-div' ).bind( {
mouseleave: function (e) {
if (e.relatedTarget.id == 'b-div' || $.contains(document.getElementById('b-div'), e.relatedTarget)) {
return;
}
$( '#b-div' ).removeClass( 'outlined' );
}
});
&#13;
#a-div {
position: relative;
margin: 20px;
}
#b-div {
height: 100px;
width: 100px;
background-color: #555;
padding: 50px;
}
#c-div {
position: absolute;
height: 50px;
width: 200px;
top: 100px;
left: 100px;
background-color: #999;
}
#d-div {
height: 50px;
width: 50px;
background-color: #ddd;
text-align: center;
}
#c-div span {
margin: 21.5px;
line-height: 50px;
}
#d-div span {
margin: auto;
line-height: 50px;
}
.outlined {
outline: 10px solid steelblue;
}
&#13;