绑定mousedown的jQuery插件可以防止点击客户端代码

jQuery plugin that bind mousedown prevent click in client code

本文关键字:客户端 代码 mousedown jQuery 插件 绑定      更新时间:2023-09-26

我有绑定到document.dococumentElement:的插件jQuery拆分器

        $(document.documentElement).bind('mousedown.splitter touchstart.splitter', function(e) {
            if (splitter_id !== null) {
                current_splitter = splitters[splitter_id];
                $('<div class="splitterMask"></div>').css('cursor', current_splitter.children().eq(1).css('cursor')).insertAfter(current_splitter);
                current_splitter.settings.onDragStart(e);
            }
        }).bind('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', function(e) {
            if (current_splitter) {
                $('.splitterMask').remove();
                current_splitter.settings.onDragEnd(e);
                current_splitter = null;
            }
        }).bind('mousemove.splitter touchmove.splitter', function(e) {
            if (current_splitter !== null) {
                var limit = current_splitter.limit;
                var offset = current_splitter.offset();
                if (current_splitter.orientation == 'vertical') {
                    var pageX = e.pageX;
                    if(e.originalEvent && e.originalEvent.changedTouches){
                      pageX = e.originalEvent.changedTouches[0].pageX;
                    }
                    var x = pageX - offset.left;
                    if (x <= current_splitter.limit) {
                        x = current_splitter.limit + 1;
                    } else if (x >= current_splitter.width() - limit) {
                        x = current_splitter.width() - limit - 1;
                    }
                    if (x > current_splitter.limit &&
                        x < current_splitter.width()-limit) {
                        current_splitter.position(x, true);
                        current_splitter.find('.splitter_panel').
                            trigger('splitter.resize');
                        //e.preventDefault();
                    }
                } else if (current_splitter.orientation == 'horizontal') {
                    var pageY = e.pageY;
                    if(e.originalEvent && e.originalEvent.changedTouches){
                      pageY = e.originalEvent.changedTouches[0].pageY;
                    }
                    var y = pageY-offset.top;
                    if (y <= current_splitter.limit) {
                        y = current_splitter.limit + 1;
                    } else if (y >= current_splitter.height() - limit) {
                        y = current_splitter.height() - limit - 1;
                    }
                    if (y > current_splitter.limit &&
                        y < current_splitter.height()-limit) {
                        current_splitter.position(y, true);
                        current_splitter.find('.splitter_panel').
                            trigger('splitter.resize');
                        //e.preventDefault();
                    }
                }
                current_splitter.settings.onDrag(e);
            }
        });

在用户代码中,当我使用此代码时,当我单击拆分器(面板之间的div)时,单击不起作用,当我点击面板时,它起作用。

  var counter = 0;
  $(document.documentElement).on('click', function(e) {
    console.log('x');
    var $target = $(e.target);
    if ($target.is('.vsplitter, .hsplitter')) {
      if (++counter == 2) {
        console.log('double click');
        $target.parents('.splitter_panel').eq(0).data('splitter').position(20);
        counter = 0;
      }
    } else {
      counter = 0;
    }
  });

当我注释掉$(document.documentElement).bind('mousedown.splitter touchstart.splitter'代码时,我可以双击拆分器。有人知道为什么会发生这种事吗?

它是由.splitterMaskdiv.

引起的