更改jQuery单击处理程序功能

时间:2012-05-31 15:00:32

标签: javascript jquery html

我在我的页面中使用拖动和滚动,它正在使用3个简单的处理程序mousedown,mousemove和mouseup。

现在我有2个问题:

  1. 我的所有.on('click'.click(事件都被破坏了,因为div正在用鼠标滚动,所以光标停留在同一个对象上并且事件会触发。我如何更改处理程序,以便只有当mousedown和mouseup之间的mousemove的距离小于固定值时才会触发?它甚至可能还是我必须创建一个自己的并更改所有代码? --- ---解决
  2. 我在此拖动和滚动期间使用event.preventDefault();来阻止选择。这导致用户无法单击表单字段。有没有一种简单的方法来解决这个问题,还是我必须以另一种方式停止选择? ---解决了办法---
  3. 任何想法都会有所帮助。

    这是滚动的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;});,但它不起作用......

1 个答案:

答案 0 :(得分: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;
    }

}