Question

我有以下HTML。我的click事件被附加到id为“Treedrop”的父span，但是每当我展开或折叠或选择一个节点时，它在扩展或折叠树之后调用'treedrop'click事件。我尝试做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"]

    });

Answer 1

首先，确定处理事件的内容。

如果您的孩子真的抓住了您的活动，您可以使用

event.stopPropagation()

以防止您的事件传播到父级。

如果父母正在捕捉您的活动，您可以使用

z-index

将孩子推到父母之上（而不是在父母的上方，而不是上方），以便孩子可以点击你。

您也可以使用

pointer-events: none;

要防止父元素接受事件，但是如果它超过了您的孩子，那么在您将孩子带到前面之前它将无法解决您的问题，它将只是无法点击的父母。

注意：评论中已经提到过这样一个提醒，修复你的HTML。 Span用于：

标记用于对文档中的内联元素进行分组。

标签本身不会发生任何视觉变化。

标记提供了一种向文本的一部分添加钩子的方法   文件的一部分。

除了可以用简单类

进行的样式外，你没有做任何事情

Answer 2

在对event.target对象进行检查后，我得到了一个解决方案。我修改了我的＆＃34; treedrop＆＃34; element的单击处理程序，它是上下文中的根元素。

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

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

2 个答案: