JQuery обнаруживает mousedown внутри элемента, а затем мышь за пределами элемента

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

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

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

Любые идеи?

Ответы

Ответ 1

var isDown = false;

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

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

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

Ответ 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');
    }
})

Ответ 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 :(');  
        }
    });
});

Ответ 4

Возможная реализация ответов майка и ожидания в 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 code):

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

    // ... do something else
}

private native void hookMouseUp () /*-{
    $wnd.$('body').addClass('noselect');
    var myThis = this;
    $wnd.mouseUpHook = function () {
        [email protected]::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, user-select: none не является достаточным.

Ответ 5

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

    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.
        }
    });