使用单击和悬停事件在jquery中创建虚拟鼠标垫

creating virtual mousepad in jquery with click and hover events

本文关键字：jquery 创建 虚拟 鼠标垫 事件 单击 悬停      更新时间：2023-09-26

嗨，朋友们，我对javascript和J Query非常陌生。现在我想创建虚拟鼠标垫。我创建了两个div，一个用于鼠标垫，第二个是容器中的容器。我使用另一个div作为光标（类名为follower）。在鼠标垫div中，鼠标移动时跟随div相对于鼠标位置移动。现在我想用虚拟光标生成点击事件，意思是用follower点击按钮。按钮1按钮2鼠标垫

这是我的js代码

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container1').mousemove(function(e){
  var offset = $('.container1').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
    mouseX=mouseX*3;
    mouseY=mouseY*3;
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp);
    yp += (mouseY - yp) ;
    follower.css({left:xp, top:yp});
    }, 30);
$('.buttons span').bind('click',function(){
    alert($(this).attr('title'));  
  });

JSbin链接

http://jsbin.com/AGAquhej/2/edit对于代码

http://jsbin.com/AGAquhej/1演示

我想要使用follower生成点击事件（在鼠标垫中移动）任何人都能解决如何生成虚假点击事件的问题吗

提前感谢

使用这个SO答案中的一些碰撞检测代码https://stackoverflow.com/a/12180865/1481489以下可能有效（未经测试，说明在评论中）：

var overlaps = (function () { // this is the collision detection code
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }
    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }
    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();
$('.container1').mousemove(function(e){
  var offset = $('.container1').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
    mouseX=mouseX*3;
    mouseY=mouseY*3;
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});
$('.container1').click(function(){
    proxyTriggerEvent('click');
});
function proxyTriggerEvent(eventName) {
    $('.container').find('a,input,.buttons span')
    .each(function() { // and loop through them all for testing
        if ( overlaps(follower,this) ) { // collision detection for each item
            $(this).trigger(eventName); // click the specific element
            return false; // break out of the loop
        }
    });
}

更新：

  • 修复了选择器没有针对按钮的错误。我把标签误读为<span class="button1">，但它实际上是<span title="button1">。选择器现在是.buttons span而不是.button1,.button2
  • 用.not('#follower')去除了跟随器不必要的滤波
  • 将命中检测移动到.container的点击处理程序中——这样，它就不会在每个间隔帧上运行，只有在它真正计数时才运行
  • 将事件触发器代理从点击调用中移出，现在任何事件都可以被触发，并且可以作为常规函数调用，例如：proxyTriggerEvent('mouseup');或proxyTriggerEvent('click');
相关文章：