Question

我在页面上有几个div，都是＆＃34; appt＆＃34;具有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事件

1 个答案: