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

Я уже некоторое время использую некоторые кнопки, которые имеют эффект нажатия, поскольку они нажимаются с использованием относительной позиции и вершины: 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, не использовать встроенный блок, увеличивать высоту строки вместо заполнения и т. д., похоже, здесь не имеет никакого эффекта. Я пробовал много комбинаций. Большая часть моего тестирования была проведена в Firefox, чтобы я мог привязываться к событиям и записывать происходящее через firebug, но я также сталкиваюсь с этой проблемой и в других браузерах.

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

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

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


events click mouse textnode
person dmnc    schedule 21.01.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

person goat    schedule 21.01.2010

arrow_upward
1
arrow_downward

Вот мой обходной путь с использованием пользовательского события с 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.

person James Wheare    schedule 31.05.2012