javascript - 拖动鼠标时如何防止触发 jQuery 'click' 事件

Question

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

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

如何防止 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);
});

我为标题中的文本设置了单独的点击事件，因为我希望在您点击标题时发生折叠/展开，而不是在您将鼠标拖到标题上时发生。

Answer 1

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

$( 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
  }
} );

Here's a fiddle