6

event.preventDefault(); return false; event.stopPropagation();

FirefoxとChromeでマウスダウンイベントをトリガーしたときにフォーカスイベントが発生するのを防ぐことができますが、IEでは失敗しました。実際、Chromeには別の問題があります。マウスダウンすると、：hovercssが機能しなくなります。` 

<input type="text" id="name">
<div id="suggest">
  <div>mark</div>
  <div>sam</div>
  <div>john</div>
</div>
$("#name").focus(suggest.show).blur(suggest.hide);

`私が期待したのは、「sam」などのサブdivをクリックしてから、$（ "＃name"）。val（ "sam"）をクリックしたときです。しかし、問題は、マウスを押すと（マウスを押しただけで、離さない）、$（ "＃name"）。blurがすぐに実行され、divが非表示になることを示唆していることです。

4

3 に答える 3

17

「選択不可」属性を使用して、IEでフォーカスが失われるのを防ぎ、他の場合はマウスダウンハンドラーを使用できます。

<input type="text" id="name">

<div onmousedown="return false" unselectable="on" id="suggest">
  <div unselectable="on">mark</div>
  <div unselectable="on">sam</div>
  <div unselectable="on">john</div>
</div>
于 2013-07-08T11:14:08.200 に答える
0

マウスボタンが押されているときにCSSを適用するには、：hoverの代わりに：activeを使用します。

ユーザーが入力をクリックしてからdivをクリックし、次にページの他の場所をクリックするとdivが残るため、blurイベントを防止しても期待どおりの結果が得られるとは思いません。それぞれに落とし穴があるいくつかの異なるオプションを考えることができます。これは、ユーザーがページ内にいる間は正しく動作しますが、ユーザーがアドレスバーに移動した場合はdivが表示されたままになります。

$("html").on("focus", "#name", function() {
    $("#suggest").show();
}).mousedown(function() {
    $("#suggest").hide();
}).on("mousedown", "#name, #suggest", function(e) {
    e.stopPropagation();
});​

jsFiddle： http: //jsfiddle.net/nbYnt/2/

IE7をサポートする必要がない場合は、CSSだけを使用してこれを行うことができます（IE8を含む最新のブラウザーで期待どおりに機能します）。

#suggest {
    display: none;
}

#name:focus + #suggest, #suggest:focus {
    border: none;
    display: block;
}

CSSメソッドを機能させるには、divにtabindexを配置する必要があることに注意してください。

<div id="suggest" tabindex="-1">

jsFiddle： http: //jsfiddle.net/nbYnt/1/

最後に、JavaScriptとCSSを組み合わせることで、divが消えるという側面を誤ることができます（これはIE7で機能します）。

#suggest:hover {
    display: block !important;
}

$("#name").focus(function() {
    $("#suggest").show();
}).blur(function() {
    $("#suggest").hide();
});

この方法の問題は、divをクリックした後、マウスを離すだけでdivが消えることです。

jsFiddle： http: //jsfiddle.net/nbYnt/4/

于 2012-05-13T17:40:03.763 に答える
0

調査中に見つけた最善の解決策は、preventDefault関数とstopPropagation関数を「mousedown」イベントではなく「pointerdown」で呼び出すことです。

どのブラウザも「mousedown」イベントの前に「pointerdown」イベントをトリガーし、「pointerdown」イベントを防ぐとフォーカスも妨げられるようです。

于 2020-02-10T14:08:41.387 に答える