Question

我有一个带有点击事件的按钮，我想让该按钮可拖动。我做的是，

$(function() {
$( "#btn-1834" ).draggable({
        cancel: false
    });
});

这是拖动按钮的脚本。但是当我拖动它会触发click事件。有没有任何解决方案，意味着我想拖动该按钮但不会在拖动后触发点击事件，并且必须有该按钮的点击事件。

按钮Id和模态ID是动态生成的

Answer 1

解决这个问题的一种方法是在某处设置一个标志，表示你正在拖动元素，然后在拖动完成几毫秒后清除标志。

然后，在你的点击处理程序中，检查是否设置了标志 - 如果是，则不做任何事情。

根据您使用的库，确切的实现可能会有很大差异，所以我无法进入更具体的内容，我担心。

Answer 2

$('#btn-1834').draggable({
    cancel: false
}).on('mouseup', function (e) {
    e.preventDefault();
    // your release code
});

或者，您可以将发布代码绑定到停止事件：

$('#btn-1834').draggable({
    cancel: false,
    stop: function (e, ui) {
        // your release code
    })
}) // ..

Answer 3

你可以使用像这样的off函数

$(function() {
$( "#btn-1834" ).off('click');
$( "#btn-1834" ).draggable({
        cancel: false
    });
});

调用拖动功能后，您可以使用on进行点击事件

Answer 4

尝试以下代码。

var clickFlag = true;
$('#btn-1834').click(function(){
    if(clickFlag){
        //do the click action
    }
})
$('#btn-1834').draggable({
    cancel: false,
    start:function(e,ui){
        clickFlag = false;
    },
    stop: function (e, ui) {
        clickFlag = true;
    }
});

注意：我还没有测试过。

<强>更新

不需要任何标记或任何内容.. 只需在可拖动事件之后分配点击事件并且工作正常

FIDDLE

更新2

删除data-target属性并按相同顺序[重要]

运行此代码

$('#btn-1834').draggable({
    cancel: false
});

$('#btn-1834').click(function(){
    $('#key_edit_modal_1834').modal('show');
})

更新3

将您的HTML更改为

<button type="button" class="btn btn-default default-key keypress btn_row1 modalbtn" id="btn-<%= key_position.id %>" data-id="<%= key_position.id %>"></button>

<div id="key_edit_modal_<%= key_position.id %>" class="modal fade">

并在可拖动

后运行

$(document).on('click','.modalbtn',function(){
    $('#key_edit_modal_'+$(this).data('id')).modal('show');
})

拖动按钮后单击事件触发

4 个答案: