JQuery UI; 선택 가능한 이벤트의 전파를 막으십시오

Question

기본적으로 ul에서 jQuery ui's selectable 기능을 사용하고 있습니다 만, ul에는 종종 스크롤바가 있고,이 스크롤바는 Webkit 브라우저에서 사용할 수 없게됩니다. 클릭하려고하면이 올가미가 선택 가능한 기능이 대신 오버로프로 그려집니다.

필자는 ul의 위치와 너비와 관련하여 커서의 위치를 ​​확인하여 커서가 스크롤 막대 위에 있는지 확인하고, 그렇다면 선택 가능한 '시작' 조건이 충족되어야 할 때 조건부 임에도 불구하고 false를 반환하거나 이벤트 진행을 중지해도 jquery가 선택 가능한 이벤트를 진행하지 못하는 것으로 보입니다. 여기

내가 대한 jQuery가 무엇 .selectablestart 이벤트 :

start: function(event, ui) { 
    var t = event.target; 
    var cutoff = t.scrollWidth + t.offsetLeft 
    if (event.clientX > cutoff) 
    { 
     console.log('NO!'); 
     console.log(event.type); 

     //overkill 
     event.stopPropagation(); 
     event.stopImmediatePropagation(); 

     if (event.stopPropagation) { 
      event.stopPropagation(); 
     } else { 
      event.cancelBubble = true; 
     } 

     return false; 
    } 
} 

모든 조언은/솔루션을 감사합니다, 감사합니다!

Answer 1

start 이벤트는 까다로운 가짜 이벤트입니다. 당신이해야 할 일은 이벤트 버블 링을 자체의 mousedown 이벤트에 직접 취소하고 이벤트 처리기가 먼저 실행되도록 코드를 첨부하는 것입니다.

당신은 event.stopPropagation의 jQuery를 워드 프로세서에이 작은 라인을 볼 수 있습니다 :이 실행에서 동일한 요소의 다른 핸들러를 방지하지 않습니다

참고.

그래서, event.stopPropagation 동안 어떤 더 DOM까지가 호출되는 다른 이벤트 핸들러는 ul에 부착 멈추지 않을 것입니다 버블 링 이벤트를 중지합니다. 이를 위해서는 selectable 이벤트 핸들러가 호출되는 것을 중지하려면 event.stopImmediatePropagation이 필요합니다.

$(function() { 
    $("#selectable").mousedown(function (evt) { 
     evt.stopImmediatePropagation(); 
     return false; 
    });   
    $("#selectable").selectable(); 
}); 

주 당신이 몰래하기 위해 .selectable() 설정 기능을 실행 전에 ul 객체 에 이벤트 핸들러를 추가해야합니다 다음 selectable demo page을 바탕으로

,이 코드는 성공적으로 거품을 취소 이벤트 거품을 먼저 터뜨릴 수 있습니다.

Answer 2

Sam C의 대답이 나에게 도움이되지 않았습니다. #selectable 일 가능성이 높습니다. $ .getScrollbarWidth()가 여기에 here

Answer 3

에서입니다

$('#selectable') 
    .mousedown(function (evt) { 
    if (event.pageX > $(this).offset().left + $(this).width() - $.getScrollbarWidth()) 
    { 
     evt.stopImmediatePropagation(); 
     return false; 
    } 
    }) 
    .selectable({filter: 'div'}); 

나를 위해 더 나은 일 샘 C의 솔루션에 약간의 변화이다 (단 MouseDown 이벤트를 취소함으로써이 내가 사용하는 것입니다 이 스크롤바를 가진 요소)에 발사 않다면 :

$(function() { 
    $("#selectable").mousedown(function (evt) { 
     if ($(evt.originalEvent.target).hasClass('ui-dialog')) // <--- variation 
     { 
      evt.stopImmediatePropagation(); 
      return false; 
     } 
     return true; 
    });   
    $("#selectable").selectable(); 
});