페이지의 아무 곳이나 클릭하여 메뉴를 숨김

Question

이 코드가 있지만 에 연결된 이벤트가 발생합니다. .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 요소에 서로 다른 유형의 핸들러 :

click 이벤트의 전파도 mousedown 이벤트가 발생하는 클릭을 방지 할 수있다하더라도

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

.

그래서 대신 $("html").on("mousedown", ... 더 $("html").on("click", ...