如何在单击子控件时停止父元素的单击事件

-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

如何在单击子控件时停止父元素的单击事件

回答

相关问题