jQuery UI：單擊事件在調整大小時被觸發

Question

我正在使用可調整大小的jQuery Ui。 但是調整大小事件會觸發元素本身的click事件和其父元素的click事件。 我嘗試使用event.stopPropagation()但顯然無法正常工作。

這是我的html的一種簡單形式：

<div class="parent">
    <div class="child ui-resizable">
        ...
        <div class="ui-resizable-handle ui-resizable-s"></div>
    </div>
</div>

我的js看起來像這樣：

$('.parent').on('click',function(){
   openModal();
});

$('.child').on('click',function(e){
    e.stopPropagation(); // To Prevent the child triggering parent click event.
    openSecondModal();
});

$('.ui-resizable').resizable({
    ghost: true,
    grid: 24,
    handles: "s",
    resize: function (event, ui) {
        event.stopPropagation();
    },
    start: function (event, ui) {
        event.stopPropagation();
    },
    stop: function (event, ui) {
        event.stopPropagation();
    },

})

拖動處理程序將觸發click事件。 有沒有辦法阻止點擊事件發生？

Answer 1

也許這將為您工作：

$('.parent').on('click',function(e){
   if(e.target !== e.currentTarget) return;
   openModal();
});