Javascript мышь выпуск события

Вот мой простой код:Javascript мышь выпуск события

<!DOCTYPE html> 
<html> 

<head></head> 

<body> 
    <style> 
    </style> 
    <script> 
var exit = 0; 
document.onmousedown = function (e) { 
    exit = 0; 
    document.onmousemove = function (e) { 
     if (exit == 1) { 
      return; 
     } else { 
      var x = e.pageX; 
      var y = e.pageY; 
      var e = document.createElement("div"); 
      e.style.width = 10 + "px"; 
      e.style.height = 10 + "px"; 
      e.style.background = "red"; 
      e.style.top = y + "px"; 
      e.style.left = x + "px"; 
      e.style.position = "absolute"; 
      document.body.appendChild(e); 
     } 
    }; 
}; 
document.onmouseup = function (e) { 
    exit = 1; 
}; 
    </script> 
</body> 

</html>

Это как painter.You держать левую кнопку мыши и, когда вы перемещаете мышь, она должна нарисовать линию, изготовленную из Div элементов, и когда вы отпустите кнопку, его stops.It на самом деле работает ... иногда. Во-первых, он работает отлично, но после того, как левая кнопка мыши поднимается вверх, а после дополнительного нажатия набирается только один элемент и перемещение мыши ничего не делает. Чтобы быть точным - иногда это происходит и иногда doesn't.Best был бы, если бы вы могли попробовать этот код и посмотреть, что происходит. Спасибо.

источник

2013-12-24 John Smith

Я сделал [скрипка] (http://jsfiddle.net/L4KhJ/) и, кажется, работы fine – Shryme

Попробуйте нарисовать линию еще раз. Я тоже попытался ее поиграть, и это снова стало странным. –

Что вы подразумеваете под странным? Я создал тонну линий, и все выглядит нормально. – Shryme

Похоже, что это конфликтует волочение с выбор. Оба события включают mousedown и последующие mousemove.

Вам нужно будет предотвратить по умолчанию событие, а затем запустить свой код.

Обновлено скрипку: http://jsfiddle.net/L4KhJ/2/

Предотвратить по умолчанию на обоих событий, как это:

document.onmousedown = function (e) { 
    stopDefault(e); // *** prevent default here 
    exit = 0; 
    document.onmousemove = function (e) { 
     stopDefault(e); // *** prevent default here 
     if (exit == 1) { ...

Где stopDefault является:

function stopDefault(e) { 
    if (e && e.preventDefault) { 
     e.preventDefault(); 
    } 
    else { 
     window.event.returnValue = false; 
    } 
    return false; 
}

Код для вышеупомянутой функции, взятой из этой темы здесь: https://stackoverflow.com/a/891616/1355315

источник

2013-12-24 13:26:41 Abhitalks

Хорошо объяснено, спасибо :) –

Когда вы нажимаете вниз и выходите из области действия, отпустите и выведите мышью, затем вернитесь, он по-прежнему рисует, не нажимая мышь вниз. – Shryme

@ Шриме: да, вы правы. это потому, что * mouseup * никогда не регистрируется в документе, потому что он вышел из области видимости. поэтому для документа он все еще нажат и, следовательно, продолжает рисовать. – Abhitalks

Когда вы добавляете некоторый выход журнала, вы видите, что иногда после события mouseup вы вскоре получаете mousedown.

Возможно, это проблема, связанная с сроками. Я переместил задание onmousemove вне функции onmousedown и теперь он работает правильно

var exit = 1; 
document.onmousemove = function (e) { 
    if (exit == 1) 
     return; 

    var x = e.pageX; 
    var y = e.pageY; 
    var el = document.createElement("div"); 
    el.style.width = 10 + "px"; 
    el.style.height = 10 + "px"; 
    el.style.background = "red"; 
    el.style.top = y + "px"; 
    el.style.left = x + "px"; 
    el.style.position = "absolute"; 
    document.body.appendChild(el); 
}; 
document.onmousedown = function (e) { 
    exit = 0; 
}; 
document.onmouseup = function (e) { 
    exit = 1; 
};

См JSFiddle

источник

2013-12-24 13:31:35

Javascript мышь выпуск события

ответ

Смежные вопросы