在移动元素上不会触发鼠标事件 [英] on a moving element don't fire the mouse events

问题描述

当鼠标移动到div上时，工具提示会显示，但是，div正在移动，它不会触发鼠标事件，请看问题： http://jsfiddle.net/jcezG/6/ （firefox 23.0.1没关系）。
`

  $（'。area'）。on（'mouseenter'，function（）{
 $（'。tooltip'）。show（）; 
}）。on（'mouseleave'，function（）{
 $（'。tooltip'）。hide（）; 
 }）; 
 var offset = 10; 
 setInterval（function（）{
 // $（'。area'）。hide（）; 
 $（'。area'）。css（{ -  webkit-transform： translate（+ offset +px，+ offset +px）}）; 
 //$('.area').css({\"left\":offset+'px',\"top\":offset+ 'px'}）; 
 offset + = 10; 
}，1000）; 
  

`

原谅我的英语不好。

解决方案

你必须使用div位置和鼠标指针位置，并在mouseenter和mousemove上激发相同的效果以获得最新的鼠标指针的位置。

  var x，y; 
 
 $（'。area'）。on（'mouseenter mousemove'，function（e）{
 //console.log(e.pageX +|+ e.pageY） ; 
x = e.pageX; 
y = e.pageY; 
 $（'。tooltip'）。css（{'top'：e.pageY，'left'：e.pageX + 15，'z-index'：'1'}）。show（）; 
}）。on（'mouseleave'，function（）{
 $（'。tooltip'）。hide（） ; 
}）; 
  

检查这个小提琴以获取更多细节

a tooltip will show when mouse over a moving div, but ,the div is moving,it doesn't fire the mouse events,see the problem: http://jsfiddle.net/jcezG/6/ (firefox 23.0.1 is ok). `

$('.area').on('mouseenter',function(){
    $('.tooltip').show();
}).on('mouseleave',function(){
    $('.tooltip').hide();
});
var offset = 10;
setInterval(function(){
    //$('.area').hide();
    $('.area').css({"-webkit-transform":"translate("+offset+"px,"+offset+"px)"});
    //$('.area').css({"left":offset+'px',"top":offset+'px'});
    offset += 10;
},1000);

`

forgive my poor english.

解决方案

you have to use the div position as well as mouse pointer position and fire same effect on mouseenter and mousemove to get the latest position of mouse pointer.

var x,y;

$('.area').on('mouseenter mousemove',function(e){
    //console.log(e.pageX + "|" + e.pageY);
    x= e.pageX;
    y=e.pageY;
    $('.tooltip').css({'top':e.pageY,'left':e.pageX + 15, 'z-index':'1'}).show();
}).on('mouseleave',function(){
    $('.tooltip').hide();
});

Check this fiddle for more detail

这篇关于在移动元素上不会触发鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！