jQuery обнаруживает mousedown внутри элемента и затем mouseup вне элемента

Question

У меня есть нечто похожее на холст для рисования, и я фиксирую его состояние при наведении мыши для отмены.Холст не на весь экран, поэтому вы можете рисовать кистью и отпускать за пределы холста.Примерно так:

$("#element").mousedown(function(){
  $(document).mouseup(function(){
    //do something
  }); 
});

Но это, конечно, не работает.Обычный $ (document) .mouseup также не работает, потому что у меня есть много других элементов пользовательского интерфейса, и он сохраняет состояние каждый раз, когда вы нажимаете на элемент пользовательского интерфейса.

Есть идеи?

Answer 1

var isDown = false;

$("#element").mousedown(function(){
    isDown = true;
});

$(document).mouseup(function(){
    if(isDown){
        //do something
        isDown = false;
    }
}); 

Ради простоты я поместил isDown в глобальное пространство имен. В производственной среде вы, вероятно, захотите выделить область действия этой переменной.

Answer 2

Ответы выше не будут работать при выделении текста.

Исправлена ​​ошибка, из-за которой текст не выбирался, когда мышь не работала, и снова включал его, когда он снова работал:

в вашем CSS:

.noselect {
    /* Prevent text selection */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Тогда ваш JS:

var myButtonDown=false;

$('.ff', ffrw).mousedown(function() {
    myButtonDown=true;
    $('body').addClass('noselect');
    //Your code here
});

$(document).mouseup(function() {
    if (myButtonDown) {
        myButtonDown = false;
        $('body').removeClass('noselect');
    }
})

Answer 3

Надеюсь, вы найдете это небольшое решение полезным. Вы можете увидеть это в действии здесь: http://jsfiddle.net/neopreneur/PR2yE/

$(document).ready(function(){
    var startMouseDownElement = null;

    $('#element').mousedown(function(){
        // do whatever
        //...

        // set mousedown start element
        startMouseDownElement = $(this);
    });

    // handle bad mouseup
    // $('#container, #container *').mouseup would be more efficient in a busy DOM
    $('body *').mouseup(function(event){
        event.stopPropagation(); // stop bubbling
        if($(this).attr('id') != $(startMouseDownElement).attr('id')){
            //oops, bad mouseup
            alert('bad mouseup :(');  
        }
    });
});

Answer 4

Если у вас много таких интерактивных элементов, как у меня, вы захотите создать глобальную ловушку мыши и установить свой код мышиного клика в муссах кликаемого элемента.Вот код, который я использовал.

    var MouseCatcher=function()
    {
        this.init=function()
        {
            var mc = this; 
            $(document).bind({
                mouseup:function(e) 
                {
                    mc.mouseup();
                }
            });
        }
        this.mouseup=function()
        {
            return false;
        }
    }
    var mouseCatcher = new MouseCatcher();
    mouseCatcher.init();



    $('#clickableElement').bind({
        mousedown: function(e)
        {
            console.log('mousedown on element');

            mouseCatcher.mouseup=function()
            {
                console.log('mouseup called from MouseCatcher');
                this.mouseup = function(){return false;}
            }

        },
        mouseup:function(e)
        {
            //mouseup within element, no use here.
        }
    });

Answer 5

Возможная реализация ответов майка и waitforatrain в GWT. В заголовке html управляйте событиями мыши (код JavaScript):

   var mouseUpHook = false;
   $(document).mouseup(function() {
       if (mouseUpHook) {
           mouseUpHook(null);
           mouseUpHook = false;
       }
   });

Пусть ваш пользовательский класс Widget реализует MouseDownHandler и MouseUpHandler и добавляет эти строки в конструктор для получения событий мыши (код Java):

    addDomHandler(this, MouseDownEvent.getType());
    addDomHandler(this, MouseUpEvent.getType());

Наконец, добавьте эти методы в свой класс Widget (код java и javascript):

@Override
public void onMouseUp (MouseUpEvent event) {
    removeMouseUpHook();

    // ... do something else
}

private native void hookMouseUp () /*-{
    $wnd.$('body').addClass('noselect');
    var myThis = this;
    $wnd.mouseUpHook = function () {
        myThis.@your.custom.widget.class.full.qualified.Name::onMouseUp(Lcom/google/gwt/event/dom/client/MouseUpEvent;)(null);
    };
}-*/;

private native void removeMouseUpHook () /*-{
    $wnd.$('body').removeClass('noselect');
}-*/;

@Override
public void onMouseDown (MouseDownEvent event) {
    hookMouseUp();

    // ... do something else

    event.preventDefault();
}

Последняя строка полезна для предотвращения перетаскивания изображения. Infact, пользователь выбирает: ни один не является достаточным.