我的元素有问题,可以拖动,也有点击事件。
$('.drag').mousedown(function() {
//...
});
$('.class').click(function() {
//...
)};
<div class="drag class"></div>
当我拖放元素时,click事件也会被触发。如何防止?
答案 0 :(得分:6)
你应该可以通过停止mousedown事件的传播来做到这一点。
$('.drag').mousedown(function(event){
event.stopPropagation();
});
您可能必须确保在点击事件之前附加了此事件。
答案 1 :(得分:6)
您也可以使用mousemove和mousedown事件一起执行某些操作来禁用click事件:
var dragging = 0;
$('.drag').mousedown(function() {
$(document).mousemove(function(){
dragging = 1;
});
});
$(document).mouseup(function(){
dragging = 0;
$(document).unbind('mousemove');
});
$('.class').click(function() {
if (dragging == 0){
// default behaviour goes here
}
else return false;
)};
答案 2 :(得分:1)
在我的情况下,选择的答案没有奏效。所以这是我的解决方案,它正常工作(可能对某人有用):
var dragging = 0;
$(document).mousedown(function() {
dragging = 0;
$(document).mousemove(function(){
dragging = 1;
});
});
$('.class').click(function(e) {
e.preventDefault();
if (dragging == 0){
alert('it was click');
}
else{
alert('it was a drag');
}
});
答案 3 :(得分:0)
我注意到如果在点击事件之前注册了拖动事件,那么所描述的问题就不会发生。这是一个示例代码:
此代码会产生上述问题:
var that = this;
var btnId = "button_" + this.getId();
var minView = $("<div>", {"id":btnId, style:"position:absolute; top:"
+ this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
minView.html(this.getMinimizedTitle());
minView.click(function expendWidget(event) {
$("#" + btnId).remove();
that.element.css({"left":that.options.style.left, "right":that.options.style.right});
that.element.show();
});
minView.draggable();
minView.on("drag", this.handleDrag.bind(this));
this.element.parent().append(minView);
此代码不会产生问题:
var that = this;
var btnId = "button_" + this.getId();
var minView = $("<div>", {"id":btnId, style:"position:absolute; top:"
+ this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
minView.html(this.getMinimizedTitle());
minView.draggable();
minView.on("drag", this.handleDrag.bind(this));
minView.click(function expendWidget(event) {
$("#" + btnId).remove();
that.element.css({"left":that.options.style.left, "right":that.options.style.right});
that.element.show();
});
this.element.parent().append(minView);
答案 4 :(得分:0)
没关系,但你应该记住,用户可以在点击过程中轻微移动鼠标而不会注意到。所以他认为嗨点击了你 - 他拖了