如何在單擊子控件時停止父元素的單擊事件

-2

我有以下html。我的點擊事件正在附加到id爲「Treedrop」的父跨度，但每當我展開或摺疊或選擇一個節點時，它在展開或摺疊樹之後調用「treedrop」單擊事件。我試着做event.stopPropagation （）。但它沒有奏效。即使當我點擊搜索文本框時，它也會調用'treedrop'點擊事件功能。如何在單擊子控件時停止父元素的單擊事件

HTML：

<div class="1row"> 
<div id="treedrop" class="select2 select2-container select2-container--default select2-container select2-container--above" dir="ltr" style="width: 816px;"> 
    <div class="selection"> 
     <div class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-8qp2-container" aria-owns="select2-8qp2-results" aria-activedescendant="select2-8qp2-result-8fea-AK"> 
      <div class="select2-selection__rendered" id="select2-8qp2-container"><span id="dropdownText" class="select2-selection__placeholder">Double Click Here</span></div><div class="select2-selection__arrow" role="presentation"> 
       <b role="presentation"></b> 
      </div> 
     </div> 
    </div> 
    <div class="dropdown-wrapper" aria-hidden="true"> 
    </div> 
    <div class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 816px;"> 
     <div class="select2-search select2-search--dropdown"> 
      <input id="treeSearch" class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"> 
     </div> 
     <div class="select2-results" id="html1">    
      <ul class="firstLevel"> 
       <li> 
        Root node 1 
        <ul> 
         <li>Child node 1</li> 
         <li>Child node 2</li> 
        </ul> 
       </li> 
       <li>Root node 2</li> 
       <li>Test</li> 
      </ul> 
     </div> 
    </div> 
</div>

jQuery和JavaScript代碼：

$("#treedrop").on("click", function (evt) {   
    $(this).toggleClass("select2-container--open"); 
    evt.stopPropagation(); 
}); 

$("#html1").on('changed.jstree', function (e, data) {   
    var i, j, r = []; 

    var node = data.instance.get_node(data.selected); 
    var parents = []; 
    var xpathString = "/" + node.text; 
    //node.parents = node.parents.pop(); 
    for (var i = 0; i < node.parents.length - 1; i++) { 
     var parentdata = data.instance.get_node(node.parents[i]).text; 
     xpathString = "/" + parentdata + xpathString; 
     parents.push(parentdata); 
    } 

    $('#dropdownText').text(xpathString).removeClass("select2-selection__placeholder");   
}).jstree({ 
     "search": { 
      "case_insensitive": true, 
      "show_only_matches": true 
     }, 
     "multiple": false, 
     "plugins": ["search"] 

    });

來源

2017-09-04 Soumya Ghosh

建議：不要使用跨度的一切。這可能是導致問題的原因。 –

'span'甚至不允許包含'ul'，這是無效的HTML - 因此請先修復。 – CBroe

跨度元素太多..：| – Red

首先，確定什麼是處理你的事件。

如果您的孩子真正吸引你的事件中，你可以使用

event.stopPropagation()

，以防止你的事件傳播到父。

如果父母正趕上你的事件中，你可以使用

z-index

讓你的點擊採取的是孩子推子上（不高於但在）父頂部。

您還可以使用

pointer-events: none;

防止父元素採取事件，但如果它在你的孩子不會解決你的問題，直到您帶孩子前面那根本是無法點擊父。

注：它已在評論中提到，所以只是提醒，修復您的HTML。量程用於：

該標記用於在文檔中對內聯元素進行分組。

該標籤本身不提供視覺變化。

該標籤提供了一種方法來將鉤子添加到文檔的一部分或文檔的一部分。

你正在做的都不是也許除了造型，您也可以做簡單的類

來源

2017-09-04 12:16:46 DanteTheSmith

我到了一個解決方案event.target對象上應用檢查後。我修改了我的「treedrop」元素的click處理程序，它是上下文中的根元素。

$("#treedrop").on("click", function (evt) {  
    if (evt.target.className.includes("select2") && !evt.target.className.includes("treeSearch")) { 
     $(this).toggleClass("select2-container--open"); 
    }  
});

來源

2017-09-05 11:51:10

如何在單擊子控件時停止父元素的單擊事件

回答

相關問題