0

我在我的页面中使用拖动和滚动，它与 3 个简单的处理程序 mousedown、mousemove 和 mouseup 一起使用。

现在我有2个问题：

  1. 我所有的.on('click'和.click(事件都有点坏了，因为由于 div 是用鼠标滚动的，所以光标停留在同一个对象上并且事件触发。如何更改处理程序，使其仅在 mousedown 和 mouseup 之间的 mousemove 距离小于固定值时触发？甚至有可能还是我必须创建一个自己的并更改所有代码？ - -解决了 - -
  2. 我event.preventDefault();在此拖动和滚动期间使用以防止选择。这导致用户无法单击表单字段。有没有简单的方法来解决这个问题，还是我必须以另一种方式停止选择？---通过变通方法解决---

任何想法都会有所帮助。

这些是滚动的 3 个处理程序：

    mouseDownHandler : function(event) {

        if (!$(event.target).closest('.stopscroll').length) {

            event.data.lastCoord = {left: event.clientX, top: event.clientY}; 

            $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
            $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

            $('body').addClass('dragcursor'); //// Add Move Cursor

            if (!$(event.target).closest('.noformelement').length) {
                event.preventDefault();
                return false;
            }
        }

    },

    mouseMoveHandler : function(event) { 
        var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};

        event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

        $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

        event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

        event.data.lastCoord={left: event.clientX, top: event.clientY}

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }

    },

    mouseUpHandler : function(event) {
        $.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
        $.event.remove( document, "mouseup", dragscroll.mouseUpHandler);

        $('body').removeClass('dragcursor');

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

更新/凹凸：我猜只需一次禁用每个点击事件就可以解决问题。我试过$(document).on('click', '*', function() {return false;});了，但它不起作用......

4

1 回答 1

0

解决了

mouseDownHandler : function(event) {

    if (!$(event.target).closest('.stopscroll').length) {

        event.data.lastCoord = {left: event.clientX, top: event.clientY}; 
        event.data.startCoord = {left: event.clientX, top: event.clientY};
        event.data.allowClick = true;
        $('*').off('click.stop');

        $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
        $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

},

mouseMoveHandler : function(event) { 
    var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};
    var range = {left: (event.clientX - event.data.startCoord.left), top: (event.clientY - event.data.startCoord.top)};
    if (event.data.allowClick && (Math.abs(range.left)>=5 || Math.abs(range.top)>=5)) {
        event.data.allowClick = false;
        $('*').on('click.stop', function() {return false;});
        $('body').addClass('dragcursor'); //// Add Move Cursor
    }

    event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

    $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

    event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

    event.data.lastCoord={left: event.clientX, top: event.clientY}

    if (!$(event.target).closest('.noformelement').length) {
        event.preventDefault();
        return false;
    }

}
于 2012-05-31T18:38:55.260 回答