jquery ui resizable 触发onclick事件

Question

我在一个页面上有几个 div，它们都带有 "appt" class，它们都有 onclick 事件。我正在尝试使用 jquery ui.

使相同的 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>

jquery ui resizable 触发onclick事件

jquery ui resizable triggers onclick event

jquery

jquery-ui

onclick

jquery-ui-resizable