blocks|key|352247|text|解决方案1|type|unstyled|depth|inlineStyleRanges|entityRanges|data|352248|不要听click，而要听mousedown。|offset|length|style|CODE|352249|当您按下鼠标按钮时，mousedown和blur事件会相继发生，但click只会在您松开鼠标按钮时发生。|352250|解决方案2|352251|你可以在mousedown中使用preventDefault()来阻止下拉菜单窃取焦点。它的一个小优点是，当释放鼠标按钮时，该值将被选中，这就是本机选择组件的工作方式。JSFiddle|352252|$('input').on('focus',+function()+{
++++$('ul').show();
}).on('blur',+function()+{
++++$('ul').hide();
});

$('ul').on('mousedown',+function(event)+{
++++event.preventDefault();
}).on('click',+'li',+function()+{
++++$('input').val(this.textContent).blur();
});|code-block|syntax|javascript|352253|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/6yyv4rd7/^0|0|3|5|C|9|0|A|9|K|4|X|5|0|0|4|9|G|G|2C|8|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@$D|1F|E|1G|F|G]|$D|1H|E|1I|F|G]]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|N|3|O|5|P|7|1M|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<h3>Solution 1</h3>

<p>Listen to <code>mousedown</code> instead of <code>click</code>.</p>

<p>The <code>mousedown</code> and <code>blur</code> events occur one after another when you press the mouse button, but <code>click</code> only occurs when you release it.</p>

<h3>Solution 2</h3>

<p>You can <code>preventDefault()</code> in <code>mousedown</code> to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. <a href="http://jsfiddle.net/6yyv4rd7/" rel="noreferrer">JSFiddle</a></p>

<pre class="lang-js prettyprint-override"><code>$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});
</code></pre>


blocks|key|568272|text|当我单击非按钮元素时，Mousedown解决方案对我不起作用。下面是我在代码中对模糊函数所做的工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|568273|.on("blur",":text,:checkbox,:radio,select",function()+{
/*
*+el.container+
*+container,+you+want+detect+click+function+on.
*/
++++++++++++var+outerDir+=+el.container.find(':hover').last();
++++++++++++if+(outerDir.length)+{
++++++++++++++++if+($.inArray(outerDir.prop('tagName'),+["A","SELECT"]+)+!=+-1+%7C%7C+outerDir.prop('type')+==+'button'+%7C%7C+outerDir.prop('type')+==+'submit')+{
++++++++++++++++++++outerDir.click();
++++++++++++++++}
++++++++++++++++if+(outerDir.prop('type')+==+'checkbox')+{
++++++++++++++++++++outerDir.change();
++++++++++++++++}
++++++++++++++++return+false;
++++++++++++}
/*++++++++++
*+YOUR_BLUR_FUNCTION_HERE;
*/
});|code-block|syntax|javascript|568274|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Mousedown solutions does not work for me, when I click on non button elements. So here is what I've done with blur function in my code:</p>

<pre><code>.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container 
* container, you want detect click function on.
*/
            var outerDir = el.container.find(':hover').last();
            if (outerDir.length) {
                if ($.inArray(outerDir.prop('tagName'), ["A","SELECT"] ) != -1 || outerDir.prop('type') == 'button' || outerDir.prop('type') == 'submit') {
                    outerDir.click();
                }
                if (outerDir.prop('type') == 'checkbox') {
                    outerDir.change();
                }
                return false;
            }
/*          
* YOUR_BLUR_FUNCTION_HERE;
*/
});
</code></pre>


blocks|key|568349|text|我遇到了这个问题，使用mousedown对我来说不是一个选择。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|568350|我通过在处理函数中使用setTimeout解决了这个问题|568351|++++++++elem1.on('blur',function(e)+{

++++++++++++var+obj+=+$(this);

++++++++++++//+Delay+to+allow+click+to+execute
++++++++++++setTimeout(function+()+{
++++++++++++++++if+(e.type+==+'blur')+{

++++++++++++++++++//+Do+stuff+here

++++++++++++++++}
++++++++++++},+250);
++++++++});

++++++++elem2.click(+function()+{
++++++++++++console.log('Clicked');
++++++++});|code-block|syntax|javascript|568352|entityMap^0|B|9|0|B|A|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I faced this issue and using <code>mousedown</code> is not an option for me. </p>

<p>I solved this by using <code>setTimeout</code> in the handler function</p>

<pre><code>        elem1.on('blur',function(e) {

            var obj = $(this);

            // Delay to allow click to execute
            setTimeout(function () {
                if (e.type == 'blur') {

                  // Do stuff here

                }
            }, 250);
        });

        elem2.click( function() {
            console.log('Clicked');
        });
</code></pre>


blocks|key|352580|text|我刚刚回答了一个类似的问题：https://stackoverflow.com/a/46676463/227578|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|352581|mousedown解决方案的另一种选择是让它忽略由单击特定元素引起的模糊事件(即，在模糊处理程序中，如果是单击特定元素的结果，则跳过执行)。|352582|$("#myinput").live('blur',function(e){
+++++if+(!e.relatedTarget+%7C%7C+!$(e.relatedTarget).is("#myresults+ul+li"))+{
+++++++++$("#myresults").hide();
+++++}
});|code-block|syntax|javascript|352583|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/46676463/227578^0|E|17|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I just answered a similar question: <a href="https://stackoverflow.com/a/46676463/227578">https://stackoverflow.com/a/46676463/227578</a></p>

<p>An alternative to the mousedown solutions is have it ignore blur events caused by clicking specific elements (i.e., in your blur handler, skip the execution if it's a result of clicking a specific element).</p>

<pre><code>$("#myinput").live('blur',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});
</code></pre>


<p>I have an input field, where I try to make autocomplete suggestion. Code looks like</p>

<pre><code>&lt;input type="text" id="myinput"&gt;
&lt;div id="myresults"&gt;&lt;/div&gt;
</code></pre>

<p>On input's <code>blur()</code> event I want to hide results' div:</p>

<pre><code>$("#myinput").live('blur',function(){
     $("#myresults").hide();
});
</code></pre>

<p>When I write something into my input I send request to server and get json response, parse it into ul->li structure and put this ul to my <code>#myresults</code> div. </p>

<p>When I click to this parsed li element I want to set value from li to input and hide <code>#myresults</code> div</p>

<pre><code>$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});
</code></pre>

<p>Everything is going good, but when I click to my li <code>blur()</code> event fires before <code>click()</code> and input's value don't get li's html. </p>

<p>How can I set up <code>click()</code> event before <code>blur()</code>?</p>


jQuery: fire click() before blur() event

服务器

我有一个输入栏，在那里我可以尝试自动完成建议。代码看起来像这样<input type="text" id="myinput"><div id="myresults"></div>在输入的blur()事件中，我想隐藏结果的div：$("#myinput").live('blur',function(){     $("#...

问jQuery:在blur()事件之前触发click()
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:在blur()事件之前触发click()EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:在blur()事件之前触发click()
EN