3

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

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

这是一个JSFiddle

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

脚本：

$(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")吗？

提前致谢。

4

3 回答 3

2

您不能使事件自动触发，但您可以使用此处记录的 jQuery 触发方法触发自定义事件。文档中的示例：

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

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

$(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 碰撞检测

如何检测重叠的 HTML 元素

但是如果没有帮助，谷歌搜索会出现更多。

于 2013-10-22T11:28:28.347 回答
1

你可以在以下的帮助下做这样的事情.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");
        });
    });
});

演示：小提琴

于 2013-10-22T11:28:21.317 回答
1

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

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

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

$('body').bind('circleenter', function() { 
    //do something;
});
于 2013-10-22T11:38:13.457 回答