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处理程序绑定到元素，在其中，存储鼠标的坐标。在click事件中，将这些鼠标坐标与当前坐标进行比较，如果它们不相同，则鼠标移动，并且您可以阻止其余的处理程序代码运行：

$( 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

Answer 2

我相信您有多种方法可供选择，以确定用户是在尝试关闭手风琴还是只选择一些文字。

您可以查看mousedown事件与mouseup之间的时间距离。在mousedown事件中，将布尔值（让其称为quick）设置为true，并将timeout函数设置为80毫秒（最小人类反应时间）以将其设置为假。在mouseup事件中，请在触发.slideUp或.slideDown之前检查该布尔值。
检查用户是否在标题中选择了文字。您可以使用window.getSelection().anchorNode === e.target执行此操作，如果此测试true您的标题中选择了一些文字，那么您可以决定在{{1}时不触发.slideUp或.slideDown事件来了。

虽然我会说上面的两个选项都是一种黑客攻击，但我认为还有另一种方法可以区分有意图将标题折叠到点击的点击以供选择。

Answer 3

很简单。

使用mouseup点击事件进行点击。

您可以像这样使用mouseup：

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

拥有变量var check = false;

仅在注册mouseup时将其设置为true。

将此检查添加到所有功能，并仅在check = true

时触发

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

3 个答案:

Here's a fiddle