jstree插件和stopPropagation問題

Question

我是第一次使用jstree 3.0.8，我有一個關於stopPropagation的問題。 當我點擊span.nodeInfo時，盡管有stopPropagation，它仍會觸發父鏈接的事件。

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

1.我想做什么：

• 我需要在樹的某些部分放置一個按鈕來觸發動作。 在這里，我使用測試警報（至少它將是一個對話框）。 （ <span class="nodeInfo">?</span>在下面的html中）
• 我想在下面的js中禁用select （ 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');
});

Answer 2

請檢查此代碼，以前代碼中的小改動。 這段代碼工作得很好..

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

希望這會幫助你。