我使用jQuery。点击来处理Raphael图形上的鼠标点击事件，同时，我需要处理鼠标拖动事件，鼠标拖动在Raphael中由鼠标下拉，鼠标上拉和鼠标移动组成。
很难区分点击和拖动，因为点击也包含鼠标下拉和鼠标上拉，我怎么能区分鼠标“点击”和鼠标“拖动”然后在Javascript?
当前回答
来自@Przemek的回答，
函数listenClickOnly(元素，回调，阈值=10){ 让拖动= 0; 元素。addEventListener('mousedown'， () => drag = 0); 元素。addEventListener('mousemove'， () => drag++); 元素。addEventListener('mouseup'， e => { 如果(拖动<阈值)回调(e); })； ｝ listenClickOnly ( 文档, () => console.log('click')， 10 ）;
其他回答
对于OSM地图上的公共操作(单击时放置标记)，问题是:1)如何确定鼠标向下的持续时间->向上(您无法想象为每次单击创建一个新的标记)2)鼠标向下移动期间->向上(即用户正在拖动地图)。
const map = document.getElementById('map');
map.addEventListener("mousedown", position);
map.addEventListener("mouseup", calculate);
let posX, posY, endX, endY, t1, t2, action;
function position(e) {
posX = e.clientX;
posY = e.clientY;
t1 = Date.now();
}
function calculate(e) {
endX = e.clientX;
endY = e.clientY;
t2 = (Date.now()-t1)/1000;
action = 'inactive';
if( t2 > 0.5 && t2 < 1.5) { // Fixing duration of mouse down->up
if( Math.abs( posX-endX ) < 5 && Math.abs( posY-endY ) < 5 ) { // 5px error on mouse pos while clicking
action = 'active';
// --------> Do something
}
}
console.log('Down = '+posX + ', ' + posY+'\nUp = '+endX + ', ' + endY+ '\nAction = '+ action);
}
如果你想使用Rxjs:
var element = document; Rx.Observable .merge( Rx.Observable.fromEvent(element, 'mousedown').mapTo(0), Rx.Observable.fromEvent(element, 'mousemove').mapTo(1) ) .sample(Rx.Observable.fromEvent(element, 'mouseup')) .subscribe(flag => { console.clear(); console.log(flag ? "drag" : "click"); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/@reactivex/rxjs@5.4.1/dist/global/Rx.js"></script>
这是@wong2在他的回答中所做的直接克隆，但转换为RxJs。
样本的使用也很有趣。示例操作符将从源(mousedown和mousemove的合并)中获取最新的值，并在内部观察对象(mouseup)发出时发出它。
另一个基于类的香草JS使用距离阈值的解决方案
private initDetectDrag(element) {
let clickOrigin = { x: 0, y: 0 };
const dragDistanceThreshhold = 20;
element.addEventListener('mousedown', (event) => {
this.isDragged = false
clickOrigin = { x: event.clientX, y: event.clientY };
});
element.addEventListener('mousemove', (event) => {
if (Math.sqrt(Math.pow(clickOrigin.y - event.clientY, 2) + Math.pow(clickOrigin.x - event.clientX, 2)) > dragDistanceThreshhold) {
this.isDragged = true
}
});
}
在类内部添加(SOMESLIDER_ELEMENT也可以是document为global):
private isDragged: boolean;
constructor() {
this.initDetectDrag(SOMESLIDER_ELEMENT);
this.doSomeSlideStuff(SOMESLIDER_ELEMENT);
element.addEventListener('click', (event) => {
if (!this.sliderIsDragged) {
console.log('was clicked');
} else {
console.log('was dragged, ignore click or handle this');
}
}, false);
}
你可以这样做:
var div = document.getElementById("div"); div.addEventListener("mousedown", function() { window.addEventListener("mousemove", drag); window.addEventListener("mouseup", lift); var didDrag = false; function drag() { //when the person drags their mouse while holding the mouse button down didDrag = true; div.innerHTML = "drag" } function lift() { //when the person lifts mouse if (!didDrag) { //if the person didn't drag div.innerHTML = "click"; } else div.innerHTML = "drag"; //delete event listeners so that it doesn't keep saying drag window.removeEventListener("mousemove", drag) window.removeEventListener("mouseup", this) } }) body { outline: none; box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; overflow: hidden; } #div { /* calculating -5px for each side of border in case border-box doesn't work */ width: calc(100vw - 10px); height: calc(100vh - 10px); border: 5px solid orange; background-color: yellow; font-weight: 700; display: grid; place-items: center; user-select: none; cursor: pointer; padding: 0; margin: 0; } <html> <body> <div id="div">Click me or drag me.</div> </body> </html>
正如mrjrdnthms在他对接受的答案的评论中指出的那样，这不再适用于Chrome(它总是触发鼠标移动)，我已经改编了Gustavo的答案(因为我使用jQuery)来解决Chrome的行为。
var currentPos = [];
$(document).on('mousedown', function (evt) {
currentPos = [evt.pageX, evt.pageY]
$(document).on('mousemove', function handler(evt) {
currentPos=[evt.pageX, evt.pageY];
$(document).off('mousemove', handler);
});
$(document).on('mouseup', function handler(evt) {
if([evt.pageX, evt.pageY].equals(currentPos))
console.log("Click")
else
console.log("Drag")
$(document).off('mouseup', handler);
});
});
Array.prototype.equals函数来自这个答案
