Question

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

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

这是我的代码：

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");
});

Answer 1

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

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

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

而不是$("html").on("mousedown", ...更好地$("html").on("click", ...

通过单击页面中的任何位置隐藏菜单

1 个答案: