Когда событие mousedown и mouseup не равно клику - PullRequest
Новая
       9

Когда событие mousedown и mouseup не равно клику

9 голосов
/ 21 января 2010

Я уже некоторое время использую некоторые кнопки, которые имеют подавленный эффект, поскольку они нажимаются с использованием относительного положения и top: 1px в псевдоклассе: active.

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

Если я щелкну вправо вверху текста, то ссылка переместится вниз (запускает событие mousedown), а затем вернется назад (активирует событие mouseup), но щелчок не произойдет. Если я хорошо нажимаю на середину текста или удаляюсь от текста, все в порядке.

Единственное, о чем я могу думать, это то, что событие mousedown запускается для textNode, а mouseup запускается для элемента привязки, так как textNode больше не находится под курсором. Поймать объекты событий и посмотреть на цели, используя firebug, указывает, что это не тот случай, но я действительно не могу придумать другого объяснения. Прочитав немного, я могу найти упоминания о событиях, запускающих textNodes в Safari, но ничего об этом несоответствии.

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

<style>
a.button-test {
 display: inline-block;
 padding: 20px;
 background: red;
}
.button-test:active {
 position: relative;
 top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>

Возиться с CSS, не использовать inline-block, увеличивать высоту строки вместо padding и т. Д., Похоже, здесь не действует. Я перепробовал много комбинаций. Большая часть моего тестирования была проведена в Firefox, чтобы позволить мне привязываться к событиям и записывать события, происходящие через firebug, но я также сталкиваюсь с этой проблемой в других браузерах.

Есть ли у кого-нибудь вдохновение, которое они могут предложить, кроме как потерять активный прыжок? Я бы очень хотел сохранить этот эффект, если смогу.

Большое спасибо,

Дом (не каламбур)

Ответы [ 2 ]

1 голос
/ 31 мая 2012

Вот мой обходной путь, используя пользовательское событие с jQuery 

var buttonPressed;
// Track buttonPressed only on button mousedown
$(document).on('mousedown', 'button', function (e) {
    // Make sure we store the actual button, not any contained
    // element we might have clicked instead
    buttonPressed = $(e.target).closest('button');
});
// Clear buttonPressed on every mouseup
$(document).on('mouseup', function (e) {
    if (buttonPressed) {
        // Verify it's the same target button
        var target = $(e.target).closest('button');
        if (target.is(buttonPressed)) {
            buttonPressed.trigger('buttonClick');
        }
        buttonPressed = null;
    }
});

$('button').on('buttonClick', function (e) {
    // Do your thing
});

Просто убедитесь, что вы не обрабатываете как собственные события click, так и buttonClick.

1 голос
/ 21 января 2010

Намного проще воспроизвести эту проблему, если изменить стиль на top: 10px

...