contenteditable div에 의해 클릭이 트리거 된 경우에만 작업 수행

Question

다음 HTML이 있습니다.

기본적으로 텍스트가 포함 된 contentaditable div입니다.

또한 div에는 사용자가 클릭 할 수있는 두 개의 다른 div가 있습니다.

<div class="test" contenteditable="true">Text 
    <div class="color-picker"> 
    <img src="/style/icons/color_swatch.png" alt="Color picker" title="Pick a color"> 
    </div> 

    <div class="color-swatch" contenteditable="false"> 
    <div class="pane"> 
     <div style="background: #000000;"></div> 
    </div> 
    <div class="pane" "=""> 
     <div style="background: #990000;"></div> 
    </div> 
    </div> 
</div> 

난 단지 작업을 수행하는 데 필요한 다음과 같은 jQuery를 가질 때의 contentEditable 사업부가 아닌 자식에 사용자가 클릭 (예를 들어, .color 피커/.color-견본).

$('div.test').mouseup(function(e) { 
    if(e.target.contenteditable=='true') { 
    alert('yes'); 
    } else { 
    alert('no'); 
    } 
    // do action only if triggered by contenteditable div 
}); 

내 생각 엔 contentedit div가 이벤트를 트리거했는지 확인하는 것입니다.

하지만 제대로 작동하지 않는 것 같습니다.

contenteditable div를 클릭하면 '아니오'라는 경고가 표시됩니다. 그렇습니다.

.color-picker를 클릭하면 || .color-switch 나 또한 'no'라는 경고를 받는다.

나를 도와 주셔서 미리 감사드립니다.

Answer 1

자바 스크립트 속성은이 같은 contentEditable해야한다, 낙타 표기법입니다 :

$('div.test').mouseup(function(e) { 
    if(e.target.contentEditable == 'true') { 
    alert('yes'); 
    } else { 
    alert('no'); 
    } 
}); 

You can test it out here.

Answer 2

당신은 속성 선택기를 사용할 수 있습니다

완벽하지만 충분하지

$("div[contenteditable='true']").mouseup