Нажатие кнопки не срабатывает, если div движется вниз

0

Итак, в прецеденте есть div, одна кнопка и одно текстовое поле.

В случае размытия текстового поля div расширяется

и при нажатии кнопки отображается предупреждение.

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

Плункер кода

http://plnkr.co/edit/TYXLeE?p=preview

Теги:

3 ответа

2
Лучший ответ

DEMO

Просто послушайте mousedown, верно, это то, что вы ищете в любом случае.

  $('#clickAbleButton').on('mousedown',function() {

Щелчок 3 события не один, и все они должны встречаться на одном элементе,

  1. MouseDown
  2. MouseUp
  3. Нажмите

Элемент уходит в сторону от мыши, поэтому просто слушайте mousedown.

На самом деле, почему вы перемещаете кнопку в середине щелчка? Я подозреваю, что эта проблема действительно проблема дизайна и должна рассматриваться как таковая, не взломанная с помощью javascript.

Поделиться
  • 0
    Несмотря на то, что я предоставил то же самое в своем ответе, я никогда не верю, что mouseDown является заменой клика. Потому что, как вы сказали, удерживая мышь, я смогу отменить свое решение щелкнуть мышью. Я не верю, что тот в тайм-аут тоже хорош .. но только некоторые варианты ... :)
  • 1
    Я согласен. Но у этого пользователя на самом деле есть проблема с дизайном, он просит пользователя нажать на движущуюся кнопку, что это? Я просто чувствую, что это понятнее и менее волшебно.
Показать ещё 4 комментария
0

Я бы попытался использовать функции.bind и.unbind jquery для необходимых событий щелчка

Поделиться
0

Быстрое решение на index.html:

<body>
<h1>Hello Plunker!</h1>
 <input type="button" id="clickAbleButton" value="Click Me" />
<input type="text" id="myInputText" value="Empty Text Box" />
<div style="height:40px;" id="everExpandingDiv">
  This is my container div
</div>

ИЛИ, лучшее решение для script.js:

$(function() {
    $('#myInputText').on('mousedown',function()     
    {$('#everExpandingDiv').height($('#everExpandingDiv').height()+20);});
    $('#clickAbleButton').click(function() {
       alert('button click was raised');
    });
});
Поделиться
  • 0
    как работает версия html?
  • 0
    Поместите кнопку сверху и разделите снизу. (index.html решение)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню