솔루션 : 제목 툴팁을 비활성화하는 방법! (예 : 자바 스크립트에서 이벤트 대상 뒤에 요소를 가져 오는 방법)

Question

다른 요소의 맨 위에 배치 된 요소가 있는데 상위 요소의 클릭 캡처를 무시하고 그 아래의 요소로 전달하는 방법은 무엇입니까?

$('a[title]').each(function (index) { 
    $(this).after('&lt;div class="overlay" style="position:absolute;background:url(../Images/space.gif);width:100px;height:100px;top:0;left:0;z-index:300"></div>') 
}) 

이유는이 코드가 제목 설명이 팝업되지 못하기 때문입니다.

리 :이 요소에 부착되어 있기 때문에 호버 사이비 수준은 여전히 ​​같은, 둘 다 포함 뒤에 링크를 작동 가져 {...}

------- 솔루션 ----------

$('a[title]').each(function (index, el) { 
    var $tooltip = $('<div class="overlay-' + index + '" />') 
         .css({ 
          position: "absolute" 
          , background: "url('../Images/space.gif')" 
          , width: $(el).width() 
          , height: $(el).height() 
          , top: 0 
          , left: 0 
          , zIndex: 300 
          , border: "1px solid red" 
         }) 
         .on('click', function (event) { 
          $(el).click(); 
         }); 
    $(this).after($tooltip); 
}) 

Answer 1

우리가 작업 할 수있는 샘플 마크 업을 게시하시기 바랍니다. 일반적으로 원하는 요소에 이벤트 핸들러를 연결하면 발생한 문제를 이해하지 못합니다.

편집 올바르게 이해하면 이것은 일종의 툴팁이며 사용자가 click 이벤트를 전달하기를 원합니다. id는 고유해야하기 때문에 처음에는 루프에서 id = "overlay"를 사용할 수 없습니다. 간단한 방법은, 또는 모든 링크가 그 위에 같은 id오버레이 인 요소를 가지고있는 것처럼 1.7

$('a[title]').each(function (index, el) { 
     var $tooltip = $('<div id="overlay-' + index + '" />') 
         //let JQuery create the CSS instead of using a style tag 
         .css({ position : "absolute" 
           , background : "url(../Images/space.gif)" 
           , width : 100 
           , height : 100 
           , top  : 0 
           , left : 0 
           , zIndex : 300 
          }) 
         //attach click handler to div 
         .on('click', function(e){ 
           $(el).trigger('click'); 
          }); 
     $(this).after($tooltip); 
}) 

Answer 2

보이는 동안 전 1.7에 대한 jQuery .bind 사용하여 이벤트 핸들러를 작성하는 것입니다.

id을 삭제하고 투명 블록 div에 class을 추가하십시오.

요소를 사용하여 class에 click 이벤트를 추가하십시오.