我使用jQuery。点击来处理Raphael图形上的鼠标点击事件，同时，我需要处理鼠标拖动事件，鼠标拖动在Raphael中由鼠标下拉，鼠标上拉和鼠标移动组成。
很难区分点击和拖动，因为点击也包含鼠标下拉和鼠标上拉，我怎么能区分鼠标“点击”和鼠标“拖动”然后在Javascript?
当前回答
如果您希望检查特定元素的单击或拖动行为，则无需监听主体即可执行此操作。
$(document).ready(function(){ let click; $('.owl-carousel').owlCarousel({ items: 1 }); // prevent clicks when sliding $('.btn') .on('mousemove', function(){ click = false; }) .on('mousedown', function(){ click = true; }); // change mouseup listener to '.content' to listen to a wider area. (mouse drag release could happen out of the '.btn' which we have not listent to). Note that the click will trigger if '.btn' mousedown event is triggered above $('.btn').on('mouseup', function(){ if(click){ $('.result').text('clicked'); } else { $('.result').text('dragged'); } }); }); .content{ position: relative; width: 500px; height: 400px; background: #f2f2f2; } .slider, .result{ position: relative; width: 400px; } .slider{ height: 200px; margin: 0 auto; top: 30px; } .btn{ display: flex; align-items: center; justify-content: center; text-align: center; height: 100px; background: #c66; } .result{ height: 30px; top: 10px; text-align: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <div class="content"> <div class="slider"> <div class="owl-carousel owl-theme"> <div class="item"> <a href="#" class="btn" draggable="true">click me without moving the mouse</a> </div> <div class="item"> <a href="#" class="btn" draggable="true">click me without moving the mouse</a> </div> </div> <div class="result"></div> </div> </div>
其他回答
另一个基于类的香草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);
}
基于这个答案，我在React组件中这样做:
export default React.memo(() => {
const containerRef = React.useRef(null);
React.useEffect(() => {
document.addEventListener('mousedown', handleMouseMove);
return () => document.removeEventListener('mousedown', handleMouseMove);
}, []);
const handleMouseMove = React.useCallback(() => {
const drag = (e) => {
console.log('mouse is moving');
};
const lift = (e) => {
console.log('mouse move ended');
window.removeEventListener('mousemove', drag);
window.removeEventListener('mouseup', this);
};
window.addEventListener('mousemove', drag);
window.addEventListener('mouseup', lift);
}, []);
return (
<div style={{ width: '100vw', height: '100vh' }} ref={containerRef} />
);
})
有同样的问题，最近在一个树列表中，用户可以点击项目或拖动它，使这个小指针类，并把它放在我的utils.js
function Pointer(threshold = 10) {
let x = 0;
let y = 0;
return {
start(e) {
x = e.clientX;
y = e.clientY;
},
isClick(e) {
const deltaX = Math.abs(e.clientX - x);
const deltaY = Math.abs(e.clientY - y);
return deltaX < threshold && deltaY < threshold;
}
}
}
下面你可以看到它的工作原理:
function Pointer(threshold = 10) { let x = 0; let y = 0; return { start(e) { x = e.clientX; y = e.clientY; }, isClick(e) { const deltaX = Math.abs(e.clientX - x); const deltaY = Math.abs(e.clientY - y); return deltaX < threshold && deltaY < threshold; } } } const pointer = new Pointer(); window.addEventListener('mousedown', (e) => pointer.start(e)) //window.addEventListener('mousemove', (e) => pointer.last(e)) window.addEventListener('mouseup', (e) => { const operation = pointer.isClick(e) ? "Click" : "Drag" console.log(operation) })
清洁ES2015
Let drag = false; 文档。addEventListener('mousedown'， () => drag = false); 文档。addEventListener('mousemove'， () => drag = true); 文档。addEventListener('mouseup'， () => console.log(拖动?'拖动':'点击'));
正如其他人评论的那样，没有遇到任何bug。
我认为区别在于，在拖拽中，mousedown和mouseup之间有一个鼠标移动，但在点击中没有。
你可以这样做:
const element = document.createElement('div') element.innerHTML = 'test' document.body.appendChild(element) let moved let downListener = () => { moved = false } element.addEventListener('mousedown', downListener) let moveListener = () => { moved = true } element.addEventListener('mousemove', moveListener) let upListener = () => { if (moved) { console.log('moved') } else { console.log('not moved') } } element.addEventListener('mouseup', upListener) // release memory element.removeEventListener('mousedown', downListener) element.removeEventListener('mousemove', moveListener) element.removeEventListener('mouseup', upListener)
