Поведение кнопки Chrome против FF

Я использовал: active pseudoclass на моих кнопках, чтобы изменить цвет прокладки и границы при нажатии. Это визуально имитирует нажатие кнопки. См. пример.

Работает в FF. Однако в Chrome клики не всегда регистрируются. В частности, если вы щелкнете и удерживаете текст внутри кнопки, затем перетащите текст (но все еще внутри кнопки), щелчок не загорится. То же самое происходит, если вы нажмете в дополнении, а затем перетащите текст.

Я читал странные вещи о кнопках и дополнениях в FF против Chrome, но я не могу понять, как решить эту проблему.

Ответы

Ответ 1

Решение: Дайте ему одно нажатие

Добавление position: relative в button, а затем наложение его на псевдо-элемент :before следующим образом:

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Кажется, разрешить ошибку для меня. См. эту скрипту. Я предполагаю, что это устраняет ошибку (которая, как я думаю, является ошибкой), когда вы нажимаете на один "элемент", чтобы сосредоточиться на ней.

Ответ 2

Попробуйте следующее: http://jsfiddle.net/uPZuJ/9/

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

Ответ 3

Ваша кнопка отлично работает в Chrome. Я исправил элемент "click-and-hold on the text in the button" несколькими строками CSS и атрибутом для IE. http://jsfiddle.net/uPZuJ/2/

EDIT: Это скриншот исправленной ошибки:

enter image description here

Ответ 4

Попробуйте следующее: http://jsfiddle.net/uPZuJ/22/ http://jsfiddle.net/uPZuJ/25/

Вот как это работает:

  • Инициализировать 'вниз' до false
  • Кнопка mousedown на кнопке вызывает "вниз" , чтобы быть правдой.
  • При нажатии кнопки мыши/щелчка, если "вниз" является истинным, добавьте текст 'click' и установите "вниз" на false

Щелчок вызывает триггер щелчком.

Перетаскивание текста в заполнение вызывает щелчок.

Перетаскивание прокладки в текст вызывает щелчок.

Перетаскивание изнутри наружу не вызывает щелчок.

Перетаскивание извне внутрь внутри не вызывает щелчок.

Вот код:

var down=false;
$("button").mousedown(function() {
    down=true;
});
$("button").mouseup(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
$("button").click(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});

Ответ 5

После игры с вашим примером, я думаю, что я получил то, что произошло за сценой. По умолчанию событие click будет проверять как mousedown, так и mouseup-событие, которое должно быть запущено до того, как оно вызовет обратный вызов. Проблема в том, что вы нажимаете на текст, ваша текущая цель - это текст (это значит, что событие mousedown уже запущено внутри текстовой области, и оно ждет, когда событие mouseup будет запущено, чтобы завершить событие click). Тем не менее, вы перетаскиваете курсор из текста и освобождаете мышь вне текстовой области, а теперь ваша текущая цель - это кнопка, а не текст больше (событие mouseup не срабатывает внутри текстовой области, а внутри области кнопок), поэтому нажмите событие не произойдет. Однако, если вы нажмете на текст и перетащите, и отпустите мышь внутри текстовой области, она будет работать нормально. Это проблема пузырька или захвата события. В jQuery у нас есть event.stopPropagation() или event.stopImmediatePropagation, но он работает только для FF, а не в Chrome.

Я предлагаю использовать событие mousedown и mouseup вместо события click.

Ответ 6

Используйте "mouseup" вместо "click", он должен работать в ie, chrome и ff.

 var elementName = "";

    $("button").mouseup(function() {

        if (elementName != "" && elementName == "BUTTON") {


            $("#clicks").append("<span>click</span><br/>");
            elementName = "";
        }

    });


    $("button").mousedown(function() {

        elementName = $(this).get(0).tagName;

    });