Question

我有带按钮的可拖动元素。但是按钮在Android Chrome上不起作用。

<div id="draggable" class="ui-widget-content">
  <p>Draggable Div</p>
  <div id="clickAction">Click Me! (I should change colour)</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( "#draggable" ).draggable();
  $( "#draggable" ).click(function() {
    console.log('clicked!')
  });

  $( "#clickAction" ).click(function() {
    if($(this).hasClass('blue')){
       $(this).removeClass('blue');
    }else{
       $(this).addClass('blue');
    }
  });
</script>

https://codepen.io/macmadill/full/gbXmZG

问题在于，先拖动事件，然后单击事件不起作用

请帮帮我。对不起，我的英语。

Answer 1

该代码似乎有效：

$(function() {
  $("#draggable").draggable();
  $("#draggable").click(function() {
    console.log('clicked!')
  });

  $("#clickAction").click(function() {
    if ($(this).hasClass('blue')) {
      $(this).removeClass('blue');
    } else {
      $(this).addClass('blue');
    }
  });
})

.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
  <p>Draggable Div</p>
  <div id="clickAction">Click Me! (I should change colour)</div>
</div>

为了在Android上的Chrome上进行测试，我创建了测试小提琴。

代码：https://jsfiddle.net/Twisty/pbcrn978/
测试：https://jsfiddle.net/Twisty/pbcrn978/show/

我的测试环境：

Chrome 71.0.3578.99

Android 8.0.0

单击事件有效，但“拖动”无效。您可能要考虑添加TouchPunch。

代码：https://jsfiddle.net/Twisty/pbcrn978/5/
测试：https://jsfiddle.net/Twisty/pbcrn978/5/show/

我现在能够复制您报告的问题。

我还发现了以下错误报告：https://github.com/furf/jquery-ui-touch-punch/issues/309

我对建议的修复程序进行了测试，但未做任何更改。此问题与事件冒泡有关。所以我调整了可拖动对象：

$("#draggable").draggable({
  handle: "p"
});

这可行，最终的代码测试在这里。

代码：https://jsfiddle.net/Twisty/pbcrn978/16/
测试：https://jsfiddle.net/Twisty/pbcrn978/16/show/

添加句柄意味着拖动的click事件仅限于<p>元素，因此不会冒泡到父级。我怀疑该事件是在捕获点击拖动与您想要的点击事件。

JavaScript

$(function() {
  $("#draggable").draggable({
    handle: "p"
  });

  $("#clickAction").click(function(e) {
    console.log(e.type + " detected");
    if ($(this).hasClass('blue')) {
      $(this).removeClass('blue');
    } else {
      $(this).addClass('blue');
    }
  });
});

希望有帮助。

Answer 2

只需将click事件更改为mousedown事件，如下所示：

$( "#draggable" ).draggable();
$( "#draggable" ).mousedown(function() {
  console.log('clicked!')
});

$( "#clickAction" ).mousedown(function() {
  if($(this).hasClass('blue')){
      $(this).removeClass('blue');
  }else{
    $(this).addClass('blue');
  }
});

在codepen中查看

不要在Android Chrome中点击可拖动元素

2 个答案: