0

我有这段代码，但它似乎总是触发附加到的事件'html'，因为当我单击.optTrigger然后菜单显示并再次单击它时，它会做闪烁的事情，它会隐藏菜单一秒钟并再次显示它，所以我猜它会触发'html'点击事件。

试试看：这是上传的网站，你要添加一个新任务，然后点击选项触发器，它是新任务中检查按钮旁边的箭头按钮，最右边。 这里

这是我的代码：

html:

<div class="mainTaskWrapper clearfix">
    <div class="mainMarker"></div>
    <label class="mainTaskLabel"></label>
    <div class="mainHolder"></div>
    <div class="subTrigger opened"></div>
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <div class="addSubButton"></div>
    <div class="dateInfo"></div>
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>
    </div>
</div>

脚本：

$("#tasksWrapper").on("click", ".mainTaskWrapper .optTrigger", function(evt){
    $(this).siblings(".mainOptions").fadeToggle(100);
    $(this).toggleClass("active");
    evt.stopPropagation();      
});

$("html").on("mousedown",function(){            
    $(".optTrigger").siblings(".mainOptions").hide();
    $(".optTrigger").removeClass("active");
});
4

1 回答 1

1

问题在于将不同类型的事件处理程序附加到 DOM 元素：

$("#tasksWrapper").on("click", ...
...
$("html").on("mousedown", ...

即使click阻止了事件的传播，点击也会触发mousedown事件。

所以与其$("html").on("mousedown", ...更好地做$("html").on("click", ...

于 2012-09-04T23:23:13.243 回答