jQuery ui resizableトリガーonclickイベント

Question

私はonclickイベントを持つ "appt"クラスのすべてのページに複数のdivを持っています。私はjqueryを使用して同じdivをサイズ変更可能にしようとしています。

問題は、resizeイベントがonclickイベントをトリガすることです。ノー成功を収めて次のことを試してみました：

$(".appt").resizable({.....}).on('resize', function (e) { e.stopPropagation(); });

Answer 1

クリックされている要素ではなく、サイズ変更可能なハンドルの実際の要素であるかどうかをチェックすることができます。下の例では、サイズ変更可能なハンドルをクリックするとonclick機能は実行されません。

$('.appt').click(function(e) { 
 
    if (e.target === this) { 
 
    console.log('I am being clicked'); 
 
    } 
 
}); 
 

 
$('.appt').resizable();

.appt { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid red; 
 
}

<div class="appt"></div> 
 
<div class="appt"></div> 
 
<div class="appt"></div> 
 
<div class="appt"></div> 
 
<div class="appt"></div> 
 

 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>