jQuery UI：调整大小时触发点击事件

Question

我在一个元素上使用可调整大小的 jQuery Ui。但是调整大小事件正在触发元素本身的单击事件和其父元素的单击事件。我尝试过使用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();
    },

})

拖动处理程序正在触发点击事件。 有没有办法阻止点击事件发生？

Answer 1

也许这对你有用：

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