Кнопка не запускается, если div движется вниз

Итак, в прецеденте есть div, одна кнопка и одно текстовое поле.Кнопка не запускается, если div движется вниз

На размытых случае текстового поля ДИВЫХ расширяющейся

и при нажатии кнопки на экране выводится сообщение.

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

Plunker кода

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

источник

2013-09-18 Mohit

Side Примечание: используйте 'console.log()', а не предупреждение для тестирования – Dom

@Mohit, если какой-либо из ответов на этот вопрос помог вам, пожалуйста, подумайте о принятии или голосовании ответов. – Fresheyeball

DEMO

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

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

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

MouseDown
MouseUp
Нажмите

Элемент съезжает пути до мыши, так что просто слушайте mousedown вместо этого.

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

источник

2013-09-18 23:00:13 Fresheyeball

Несмотря на то, что я дал то же самое в своем ответе, я никогда не верю, что mouseDown является заменой щелчка. Потому что, как вы сказали, удерживая мышь, я должен вернуть свое решение щелкнуть. Я не верю, что один из тайм-аутов тоже хорош. Но только некоторые из вариантов ... :) – PSL

Согласен. Но у этого пользователя есть проблема с дизайном в действительности, попросив пользователя нажать на движущуюся кнопку, wtf это? Я просто чувствую, что это clearner и меньше магии. – Fresheyeball

Истинный ... Он требует плохого использования на конечной точке зрения пользователя ... особенно если вы представляете клиенту его просьбу о проблемах ... – PSL

Быстрое решение на 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>

ИЛИ, лучшим решением on script.js:

$(function() { 
    $('#myInputText').on('mousedown',function()  
    {$('#everExpandingDiv').height($('#everExpandingDiv').height()+20);}); 
    $('#clickAbleButton').click(function() { 
     alert('button click was raised'); 
    }); 
});

источник

2013-09-18 22:59:22 agustinm20

Как работает html-версия? – Fresheyeball

Положите кнопку вверху и div внизу. (index.html solution) – agustinm20

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

источник

2013-09-18 23:28:54 CodeGodie

Кнопка не запускается, если div движется вниз

ответ

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