Question

这里有4个盒子和一个圆圈（只是一些样本元素），圆圈是绝对位置，可以通过触发器自由移动投掷框。

现在我需要做一些事情才能将圆圈输入框中。我想知道是否有任何方法可以定义类似“circleenter”而不是“mouseenter”的自定义事件处理程序

在鼠标悬停在每个方框上时，圆圈将移动到该方框并更改颜色，假设我们想要更改所有传递的方块的颜色，或者在路径中的方块上执行其他操作。

脚本：

$(document).ready(function(){
    var circle=$(".circle");
    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        circle.animate(animate,200,function(){
            $this.css("background","#888");
        });
    });
});

CSS：

#box-wrapper{
    position:relative;
    width:400px;
    height:100px;
}
.box{
    width:75px;
    height:75px;
    border:1px solid #000;
    background:#ccc;
    float:left;
    cursor:pointer;
}
.circle{
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff800;
    left:18px;
    top:18px;     
}

这只是一个例子，所以问题是在这种情况下，我们可以有类似$(".box").on("circleenter")的内容吗？

提前致谢。

Answer 1

您无法自动触发事件，但您可以使用记录在here的jQuery触发器方法触发自定义事件。来自文档的示例：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

从评论看来，无论鼠标是否已进入圆圈，您都希望在圆圈穿过正方形时触发事件。在这种情况下，除了在动画上使用'progress'选项之外，我看不到任何解决方案，并检查您是否在每一步都输入了一个正方形。你需要注意性能问题......

$(document).ready(function(){
    var circle=$(".circle");

    $('.box').on('circleenter', function(){
        $this.css("background","#888");
    });

    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        var lastBoxId = null;
        circle.animate(animate,
           {duration: 200, 
            progress: function(){
              //Check whether the circle has entered a box
              var currentBox = //Get the current box;
              if(currentBox && currentBox.id != lastBoxId){
                  $(currentBox).trigger('circleenter');
                  lastBoxId = currentBox.id;
              }
            }});
    });
});

以下是一些可能有助于找到元素之间重叠的SO答案：

jQuery/JavaScript collision detection

How to detect overlapping HTML elements

但如果谷歌搜索没有帮助，那么谷歌搜索会有更多的搜索结果。

Answer 2

您可以在.mouseenter()的帮助下执行以下操作： -

$(document).ready(function () {
    var circle = $(".circle");
    $(".box").mouseenter(function () {

        // Trigger the custom event
        $(this).trigger("circleenter");
    });

    // Bound the custom event handler
    $(".box").on("circleenter", function () {
        var $this = $(this),
            idx = $this.index();
        width = $this.width();
        var animate = {
            left: width * idx + 18
        };
        circle.animate(animate, 200, function () {
            $this.css("background", "#888");
        });
    });
});

演示：Fiddle

Answer 3

您可以随时触发任何类似的自定义事件：

$('.circle').trigger('circleenter');

在页面加载时，请确保页面侦听此事件：

$('body').bind('circleenter', function() { 
    //do something;
});

元素的JQuery自定义事件处理程序输入

3 个答案: