Не нажимайте перетаскиваемый элемент в Android Chrome

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

Просто измените 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

Answer 2

Код работает:

$(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>

Для тестирования на Chrome на Android я создал тестовую скрипку.

• Код: https://jsfiddle.net/Twisty/pbcrn978/
• Тест: https://jsfiddle.net/Twisty/pbcrn978/show/

Моя тестовая среда:

Chrome 71.0.3578.99

Android 8.0.0

Событие Click работает, а Drag - нет.Возможно, вы захотите добавить 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/

Добавление дескриптора означало, что событие щелчка для перетаскивания ограничивалось только элементом <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');
    }
  });
});

Надеюсь, это поможет.