У меня есть простая кнопка, как это:OnClick событие не срабатывает при перемещении мыши

<a class="button" href="javascript:void(0);" onclick="submitActivity();">Add</a>

Я также попытался с:

<a class="button" href="javascript:submitActivity();">Add</a>

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

Это происходит в Chrome. Не тестировали другие браузеры.

Я хочу, чтобы событие срабатывало независимо от того, где находится кнопка, которую вы нажимаете и отпускаете.

Редактировать: То же самое происходит в Firefox, но визуально это выглядит так, как будто я перетаскиваю ссылку. Таким образом, он по меньшей мере имеет смысл для пользователя, которого он не представляет, но в Chrome нет такого визуального индикатора того, что происходит.

источник

2012-03-24 OMGKurtNilsen

Вы фактически перетаскиваете, а не нажимаете. Это обычное поведение браузера. –

Это по дизайну. Лучшим решением будет уведомление пользователя при его успешном представлении. – mellamokb

Topener: Я понимаю, что происходит, но Chrome не дает никакого наглядного представления о том, что вы его перетаскиваете. mellamokb: Но пользователь, который ничего не отправил, не знает, ожидать этого уведомления. – OMGKurtNilsen

Решение было сделать preventDefault() на OnMouseDown.

$(".button").mousedown(function(event){ 
    event.preventDefault(); 
    return false; 
});

источник

2012-03-24 22:02:22 OMGKurtNilsen

Это чистый jQuery, не так ли? –

Ну, я решил это с помощью jquery, так как я использовал это. Идея состоит в том, чтобы предотвратить действие по умолчанию для события mousedown, чтобы остановить перетаскивание объектов. – OMGKurtNilsen

Я знаю, хороший. Но я не вижу тег jQuery –

Щелчок определяется как «удерживание кнопки мыши, а затем отпускание кнопки мыши». Это комбинация события мыши и мыши, выполненного над одним и тем же элементом. Если пользователь удаляется от элемента, они больше не выполняют щелчок, просто мускулатуру (а также мышь, а затем мышь на другом элементе).

Это стандартное, интуитивное поведение. Пользователи не ожидают, что их клик «будет иметь значение», если они не отпустят мышь, не двигаясь.

Если для вашего приложения это действительно важно, чем ЛЮБОЙ результат щелчка в этом представлении происходит для вас, то не ходите с onclick, идите с onmousedown.

<a class="button" href="javascript:void(0);" onmousedown="submitActivity();">Add</a>

РЕДАКТИРОВАТЬ: Непознанная ваша проблема. Возможно, этот синтаксис, что я привык работать для вас будет работать для вас:

<INPUT type="button" value="Add" name="add_button" onClick="submitActivity()">

источник

2012-03-24 21:44:12 Jeremy

Это происходит даже при том, что курсор никогда не покидает объект, пока он не сдвинул несколько пикселей в сторону перед выпуском. Наличие onmousedown на самом деле не является хорошим решением, потому что это не так, как обычно работают кнопки +: активный стиль не вступает в игру. – OMGKurtNilsen

Итак, как мы предотвращаем мышь, значительное движение мыши, а затем мышь на том же элементе из вызывающего onclick? когда, например, элемент document.body, поэтому независимо от того, как далеко вы двигаетесь, он все еще остается щелчком (и вы не хотите, чтобы это было)? – Michael

Demo fiddle

<a class="button" href="javascript:void(0);" onMouseDown="submitActivity();">Add</a>

источник

2012-03-24 22:10:43

я наткнулся на такой же проблемой, но в другом контексте. Я создал пользовательские кнопки с помощью divs с onclick = "..." и размещением дочерних divs в них для текста кнопки и значка. При перемещении курсора даже одного пикселя над дочерним div между mousedown и mouseup родительский div сгенерировал событие mouseout, которое предотвращало запуск события click. Я не мог найти способ отключить событие mouseout, но нашел простую CSS-решение этой проблемы. Просто отключите указатели-события для всех детей:

.buttondiv * { 
    pointer-events: none; /* prevent click problems in buttons containing child divs */ 
}

источник

2017-12-13 16:28:12

OnClick событие не срабатывает при перемещении мыши

ответ

Demo fiddle

Смежные вопросы