这是我有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")吗？
提前致谢。
您不能使事件自动触发，但是可以使用此处记录的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答案，这些答案可能有助于发现元素之间的重叠：
但是，如果没有帮助，谷歌搜索还会发现更多内容。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句