javascript - jstree 插件和 stopPropagation 问题

Question

我是第一次使用 jstree 3.0.8，我有一个关于 stopPropagation 的问题。 当我点击 span.nodeInfo 时，尽管有 stopPropagation，它仍然会触发父链接的事件。

你可以在 jsfiddle 上看到一个例子:http://jsfiddle.net/CloughyLow/7p0xq698/29/

<强>1。我想做什么:

• 我需要在我的树的某些部分放置一个按钮来触发一个 Action 。在这里，我使用警报进行测试(至少它是一个对话框)。 (<span class="nodeInfo">?</span> 在下面的 html 中)
• 我想禁用选择(下面js中的deselect_node(data.node))
• 然后在父节点上触发 open/colse(下面 js 上的 toggle_node(data.node))

这个列表的最后两点没问题。但是我无法在不触发第三个的情况下使第一个工作，因为 stopPropagation似乎不起作用。你知道我做错了什么吗？

<强>2。我做了什么:

HTML

div id="myTreeview">
    <ul>
        <li class="jstree-open" data-jstree='{"icon":"fa fa-folder"}'>
            title <span class="nodeInfo">?</span>
            <ul>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
            </ul>
        </li>
        <li class="jstree-open" data-jstree='{"icon":"fa fa-folder"}'>
            title <span class="nodeInfo">?</span>
            <ul>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
            </ul>
        </li>
    </ul>
</div>

JS

    $('#myTreeview').jstree({});

$('#myTreeview').on('select_node.jstree', function (e, data) {
        // avoid selection
        $('#myTreeview').jstree(true).deselect_node(data.node);
        // trigger open close
        if (data.node.children.length > 0) {
            $('#myTreeview').jstree(true).toggle_node(data.node);
        } 
        //restore links
        else {
            var href = data.node.a_attr.href;
            window.open( href,'_blank' );
        }
    });
// ------------------DOESNT SEEM TO WORK ---------------------
//stop propagation for nodeInfo DOESNT SEEM TO WORK
$('body').on('click','.nodeInfo', function(event){
    event.stopPropagation();
    alert('test');
});

你可以在 jsfiddle 上看到一个例子:http://jsfiddle.net/CloughyLow/7p0xq698/29/

希望我的解释没问题。感谢您的帮助。

Answer 1

你试过吗:

event.preventDefault();

这对我有用:

$('.nodeInfo').on('click', function(event){
    event.preventDefault();
    event.stopPropagation();
    alert('test');
});