e.stopPropagation() 선택 상자 드롭 다운 클릭

Question

나는 blur 함수 세트로 div를 편집 할 수 있습니다. 선택 상자를 클릭하면 흐림이 호출됩니다.

선택 항목에서 클릭 전파가 중지 될 수 있습니까?

나는 http://jsfiddle.net/LZQSC/

$("#testInput").blur(function(){alert('blur');}); 

$('#testDropdown').bind('mousedown',function(e){ 
    //e.preventDefault(); 
    e.stopPropagation(); 
}); 

이 가능 를 시도? 나는 다른 방법을 시도했지만 아무 것도 효과가 없었다.

Answer 1

당신은 선택 mouseenter에 흐림 기능을 바인딩을 해제하고하는 MouseLeave에 다시 바인딩 할 수 있습니다 : 모든

$("#testInput").blur(function(){alert('blur');}); 

$('#testDropdown').on('click',function(){ 
    // Do stuff 
}).on('mouseenter', function() { 
    $("#testInput").unbind('blur'); 
}).on('mouseleave', function() { 
    $("#testInput").bind('blur', function() { 
     alert('blur'); 
    }); 
}); 

http://jsfiddle.net/LZQSC/1/

Answer 2

첫째 :

흐림/포커스 변경이 중지의 영향을받지 않습니다 클릭 전파. (당신은 stopPropagation, stopImmediatePropagation 또는 preventDefault의 사용하여야한다 - 단지 클릭의 기본 동작하지 않습니다) 반면에

을 :

이전에 초점을 가지고 어떤 요소에 초점을 유지하려는 경우 다음을 수행해야합니다

1. 하는 것은 선택 한 경우에 초점을 복원 선택
2. 와의 상호 작용을 시작할 때 포커스를 가지고있는 기억

예제 : http://jsfiddle.net/LZQSC/3/

$("#testInput").blur(function(){console.log('blur');}); 

(function(){ 
    // stores focused element reference 
    var focusedElement; 
    $('#testDropdown').on('mousedown', function(e){ 
      // on mousedown we get the focused element 
      var el = $(':focus'); 
      // if this is other than the current select element 
      if(el.length > 0 && el[0] !== e.currentTarget){ 
       // save it in the var 
       focusedElement = el; 
      } 
     }).change(function(e){ 
      console.log('changed'); 
      /* do stuff */ 
      // restore original focus 
      console.log('setting focus on'+focusedElement.selector); 
      focusedElement.focus(); 
    }); 
})();