Javascript 当拖动鼠标时，如何防止jQuery“click”事件触发

当您单击面板标题时，我的面板会折叠/展开

但这些标题中也有文本，通常需要选择这些文本进行复制/粘贴

当单击鼠标以拖动选择文本时，如何防止jQuery事件.slideUp和.slideDown触发

var currentlyAnimating = false;
function setAnimationOff() {
    currentlyAnimating = false;
}
function setAnimationOn(this_animation) {
    currentlyAnimating = this_animation;
    setTimeout(setAnimationOff, 650);
}
function panelAccordionAnimation(this_heading) {
    var _meta_div = this_heading.nextAll('.panel-body, .course-heading');
    var _button = this_heading.find('.heading-container-btn.right-most');
    if (_meta_div.css('display') == 'none') {
        this_heading
            .animate({
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0}, 200);
        _button
            .animate({
                borderBottomRightRadius: 0}, 200);
        _meta_div.delay(200).slideDown();
    } else {
        _meta_div.slideUp();
        this_heading.delay(200)
            .animate({
                borderBottomLeftRadius: 14,
                borderBottomRightRadius: 14}, 200);
        _button.delay(200)
            .animate({
                borderBottomRightRadius: 14}, 200);
    }
}
_student_details.on('click', '.top-heading.blue', function(e) {
    var _heading = $(e.target);
    if (_heading == currentlyAnimating) {
        return false;
    }
    panelAccordionAnimation(_heading);
    setAnimationOn(_heading);
});
_student_details.on('click', '.top-heading.blue .heading-container-title', function(e) {
    var _heading = $(e.target).parent();
    if (_heading == currentlyAnimating) {
        return false;
    }
    panelAccordionAnimation(_heading);
    setAnimationOn(_heading);
});

我对标题中的文本有单独的单击事件，因为我希望在单击标题时发生折叠/展开，而不是在标题上拖动鼠标时发生折叠/展开。

这很简单

通过鼠标点击触发事件

您可以像这样使用鼠标：

$( "#target" ).mouseup(function() {
   alert( "Handler for mouseup() called." );
})

变量var检查=false

只有在注册鼠标时才将其设置为true

---

将此检查添加到所有函数中，并仅在check=true时触发。我相信您有几种方法可供选择，以确定用户是否试图关闭手风琴或只是选择一些文本

您可以检查mousedown事件和mouseup之间的时间距离。在mousedown事件中，设置一个布尔函数，让我们快速调用它为true，并将超时函数设置为80ms最小人类反应时间，以将其设置为false。在mouseup事件中，在触发.slideUp或.slideDown之前检查该布尔值。 检查用户是否在标题中选择了文本。如果此测试为真，则可以使用window.getSelection.anchorNode===e.target执行此操作。如果标题中选择了某些文本，则可以在mouseup事件发生时决定不触发.slideUp或.slideDown。 虽然我想说上面的两个选项都是一种黑客行为，但我不认为有其他方法可以区分一个点击，它打算将标题折叠为一个点击，只是为了选择。

将mousedown处理程序绑定到元素中，在元素中存储鼠标坐标。在单击事件中，将这些鼠标坐标与当前坐标进行比较，如果它们不相同，则表示鼠标已移动，您可以阻止处理程序的其余代码运行：

$( yourEl ).on( {
  mousedown: function( evt ) {
    $( this ).data( 'mCoords', { x: evt.pageX, y: evt.pageY } );
  },
  click: function( evt ) {
    var $this = $( this );

    if ( $this.data( 'mCoords' )[ 'x' ] !== evt.pageX 
      || $this.data( 'mCoords' )[ 'y' ] !== evt.pageY
    ) {
      // the mouse was moved
      return true;
    }

    // your code
  }
} );

---

不要考虑如何防止事件触发，而是考虑当某个条件为真时如何忽略事件。您可以共享您正在使用的代码的相关部分吗？为什么不在标题中使用链接？可以单击/选择它。。。就像我一样。我甚至不知道bootstrap有自己的手风琴！选择文本后，它仍将激发。如果鼠标在mousedown和mousedown之间移动，我试图阻止所有的射击mouseup@LXXIII是的，请检查确认。仅当您有mouseup事件时才将其设置为true。如果该检查为真，则只为click启动函数。@billyonecan我让他在click事件中添加一个条件。这就解决了问题。我不明白添加鼠标处理程序是如何解决问题的problem@billyonecan一旦用户单击div，就会调用一个函数。我让他用鼠标代替点击。所以在mouseup上应该调用这个函数。