Question

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

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

1。我想做什么：

我需要在树的某些部分放置按钮来触发操作。在这里，我使用测试警报（至少它将是一个对话框）。（下面的html中的<span class="nodeInfo">?</span>）
我想禁用选择（以下js中为deselect_node(data.node)）
然后在父节点上触发open / colse（{j}下面的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');
});

Answer 2

请检查此代码，以前代码中的小改动。这段代码工作正常..

$('.jstree-open').on('click', function(event){
  event.preventDefault();
  event.stopPropagation();
  alert('test result');
});

希望这会对你有所帮助。

jstree插件＆amp; stopPropagation问题

HTML

JS

2 个答案: