Javascript click и mousedown конфликтуют

У меня есть определенный сценарий, в котором я использую click для вставки div, а затем mousedown в этот div для его перетаскивания. Я привязал click к родительскому контейнеру и mousedown к самому div. Но когда я mousedown в div, он также запускает щелчок на родительском объекте, поэтому вставляя div с несколькими путями вместо перетаскивания уже добавленного div!

Есть ли способ решить эту проблему? Я не могу отменить click, так как мне нужно добавить 2 div с помощью click, а затем привязать mousedown к ним.

Обновление: я использую тип привязки selector.on(event, handler).

Ответы

Ответ 1

Попробуйте этот путь. Поскольку event.stopPropagation не останавливает событие события click от мыши вниз. События мыши и нажатия не связаны друг с другом.

 var mousedDownFired = false;

  $("#id").mousedown(function(event){
      mousedDownFired =true;
      //code
  });

  $("#id").click(function(event){
     if(mousedDownFired)
      {
         mousedDownFired = false;
         return;
      }
      //code
 });

Обновлено:

NO. События мыши вызываются таким образом

1) MouseDown

2) Нажмите

3) MouseUp

если нажата кнопка мыши, тогда флаг будет активирован после нажатия кнопки мыши. . В этом событии click будет отключена переменная флага. это будет работать циклично. не рассматривая две мыши или два щелчка

Ответ 2

То, что вы, скорее всего, захотите сделать, это присоединить обработчики событий к родительскому контейнеру, а не к отдельным дочерним div. Делая это, поскольку новые дети создаются, вам не нужно добавлять дополнительные обработчики событий.

Например:

$("#parentDiv").on('click','.childDiv',function() {
    event.stopPropagation();
}).on('mousedown','.childDiv',function() {
    // your dragging code
});

Когда вы предоставляете селектор функции .on(), передаваемая функция вызывается для потомков, соответствующих этому селектору.

Ответ 3

Вы можете использовать event.stopPropagation().

Пример:

$("#button").mousedown(function(event){
event.stopPropagation();
// your code here
});

$("#button").click(function(event){
event.stopPropagation();
// your code here
});

Посмотрите на эту страницу http://api.jquery.com/event.stopPropagation/

Ответ 4

            var timestamp = 0;
    jQuery('ul.mwDraggableSelect a',element).mousedown(function(event){
        timestamp = new Date().getTime();
    });

    jQuery('ul.mwDraggableSelect a',element).click(function(event){
        var interval = 400;//if a mousedown/mouseup is longer then interval, dont process click
        var timestamp2 = new Date().getTime();
        if((timestamp2 - timestamp)>interval){ return false; }

                    /* your code here */
            });