タグ付けされた質問 「dom-events」

DOM(Document Object Model)イベントを使用すると、イベント駆動型プログラミング言語でDOMツリー内の要素ノードにさまざまなイベントハンドラー/リスナーを登録できます。

7
jquery mouseenter()とmouseover()
したがって、最近回答された質問を読んだ後、mouseenter()との違いを本当に理解しているかどうかはわかりませんmouseover()。投稿の状態 マウスオーバー(): 要素に入ると、要素内でマウスの動きが発生するたびに発生します。 MouseEnter(): 要素に入ると発砲します。 私は両方を使用するフィドルを思いつきました、そしてそれらはかなり似ているようです。誰かが私に2つの違いを説明できますか? 私はまた、JQueryの定義を読んでみましたが、どちらも同じことを言っています。 マウスポインターが要素に入ると、mouseoverイベントが要素に送信されます。 マウスポインターが要素に入ると、mouseenterイベントが要素に送信されます。 誰かが例で明確にしてくれますか?
172 jquery  dom-events 

19
jQueryなしで親の絶対divの子要素をホバーするときにonmouseoutを防ぐ
onmouseout絶対位置のdivで関数に問題があります。マウスがdivの子要素を押すと、mouseoutイベントが発生しますが、マウスが親の絶対divの外になるまで発生させたくありません。 mouseoutjqueryなしで子要素にヒットしたときにイベントが発生しないようにするにはどうすればよいですか。 これはイベントのバブリングと関係があることはわかっていますが、これを解決する方法を見つけるのに運がありません。 私はここで同様の投稿を見つけました:子要素によってトリガーされるマウスアウトイベントを無効にする方法? ただし、そのソリューションはjQueryを使用します。

14
マウスの「クリック」と「ドラッグ」を区別する方法
私が使用jQuery.clickラファエルグラフ上でマウスクリックイベントを処理するために、その間、私はマウス処理する必要があるdragイベントを、マウスドラッグの構成要素はmousedown、mouseupとmousemoveラファエルインチ 識別することは困難であるclickとdragためclickにも含まれていmousedown&mouseup、どのように私はJavascriptで、その後マウス「をクリックし、」&マウス「ドラッグ」を見分けることができますか?

4
関数内でこのsetIntervalをクリアするにはどうすればよいですか?
通常は、間隔を変数に設定してそれを次のようにクリアしますvar the_int = setInterval(); clearInterval(the_int);が、コードが機能するように無名関数に入れます。 function intervalTrigger() { setInterval(function() { if (timedCount >= markers.length) { timedCount = 0; } google.maps.event.trigger(markers[timedCount], "click"); timedCount++; }, 5000); }; intervalTrigger(); どうすればこれをクリアできますか?私はそれを試しvar test = intervalTrigger(); clearInterval(test);て、確かめようとしましたが、それはうまくいきませんでした。 基本的に、Googleマップがクリックされたときにトリガーを停止するには、これが必要です。 google.maps.event.addListener(map, "click", function() { //stop timer });

22
親要素の「ドラッグリーブ」は、子要素の上にドラッグすると発生します
概観 次のHTML構造があり、dragenterおよびdragleaveイベントを<div id="dropzone">要素にアタッチしました。 <div id="dropzone"> <div id="dropzone-content"> <div id="drag-n-drop"> <div class="text">this is some text</div> <div class="text">this is a container with text and images</div> </div> </div> </div> 問題 私は上のファイルをドラッグすると<div id="dropzone">、dragenter期待通りにイベントが発生します。私は子要素の上に私のマウスを移動すると、しかし、のような<div id="drag-n-drop">、dragenterイベントが焼成された<div id="drag-n-drop">要素と、その後dragleaveのイベントがために解雇される<div id="dropzone">要素。 <div id="dropzone">要素に再びカーソルを合わせると、dragenterイベントが再び発生しますが、これはクールですがdragleave、子要素の残りのイベントが発生するため、removeClass命令は実行されます。 この動作には2つの理由で問題があります。 dragenter&dragleaveをアタッチしているだけな<div id="dropzone">ので、子要素にこれらのイベントもアタッチされている理由がわかりません。 <div id="dropzone">子の上にカーソルを置いている間も要素をドラッグしているのでdragleave、発砲したくありません! jsFiddle jsFiddleをいじくり回します。 http 質問 だから...どうすれば、<div id="dropzone">要素の上にファイルをドラッグしているときにdragleave、子要素の上にドラッグしていても起動しないようにすることができます...要素を離れたときにのみ起動する必要があり<div id="dropzone">ます。要素の境界内の任意の場所でホバリング/ドラッグしても、イベントはトリガーされませんdragleave。 これは、少なくともHTML5のドラッグアンドドロップをサポートするブラウザーでは、ブラウザー間の互換性が必要なので、この答えは適切ではありません。 GoogleとDropboxはこれを理解しているようですが、それらのソースコードは縮小化/複雑化されているため、実装からこれを理解することができませんでした。

16
「検索」HTML5入力のクリアをどのように検出しますか?
HTML5では、search入力タイプの右側に小さなXが表示され、テキストボックスがクリアされます(少なくともChromeでは、おそらく他のものでも)。このXがJavaScriptまたはjQueryでクリックされたことを検出する方法はありません。たとえば、ボックスがまったくクリックされたことを検出したり、何らかの場所のクリック検出(x位置/ y位置)を実行したりする方法はありますか?

8
Chromeを使用して、要素にバインドされているイベントを見つける方法
私のページにリンクがあるとしましょう: <a href="#" id="foo">Click Here</a> 他には何も知りませんが、リンクをクリックすると、 alert("bar")とが表示されます。ですから、どこかにコードがバインドされていることを知ってい#fooます。 バインドしているコードを見つけるにはどうすればよいですか alert("bar")クリックイベントにですか?Chromeでの解決策を探しています。 追伸:この例は架空のものなので、「XXXXXXを使用してプロジェクト全体で「alert(\ "bar \")」を検索するようなソリューションは探していません。実際のデバッグ/トレースソリューションが必要です。

29
JavaScriptを使用してTwitter Bootstrap 3の応答のあるブレークポイントを検出する方法
現在、Twitter Bootstrap 3には次のレスポンシブブレークポイントがあります:768px、992px、1200pxで、それぞれ、小型、中型、大型のデバイスを表します。 JavaScriptを使用してこれらのブレークポイントを検出するにはどうすればよいですか? 画面が変化したときにトリガーされるすべての関連イベントをJavaScriptでリッスンしたいと思います。また、画面が小型、中型、または大型のデバイス用かどうかを検出できるようにします。 すでに何かが行われていますか?あなたの提案は何ですか?

7
JavaScriptを使用してマウスクリックをシミュレートする方法は?
私はそのdocument.form.button.click()方法を知っています。ただし、onclickイベントのシミュレーション方法を教えてください。 私はこのコードをStack Overflowのどこかで見つけましたが、それを使用する方法がわかりません:( function contextMenuClick() { var element= 'button' var evt = element.ownerDocument.createEvent('MouseEvents'); evt.initMouseEvent('contextmenu', true, true, element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 1, null); element.dispatchEvent(evt); } JavaScriptを使用してマウスクリックイベントを起動するにはどうすればよいですか?

20
form.submitの応答を取得する方法
私は次のコードを持っています: <script type="text/javascript"> function SubmitForm() { form1.submit(); } function ShowResponse() { } </script> . . . <div> <a href="#" onclick="SubmitForm();">Click</a> </div> のHTML応答をキャプチャしたいform1.submitですか?どうすればよいですか?form1.submitメソッドにコールバック関数を登録できますか?

7
Internet Explorer 9、10、11のイベントコンストラクターが機能しない
私はイベントを作成しているので、DOM Eventコンストラクターを使用します。 new Event('change'); これは最新のブラウザでは問題なく機能しますが、Internet Explorer 9、10、11では次のエラーで失敗します。 Object doesn't support this action Internet Explorerを修正するにはどうすればよいですか(理想的にはポリフィルを使用)。できない場合、使用できる回避策はありますか?

21
JavaScriptを使用してiframeへのクリックを検出する
iframeクロスドメインの場合、ユーザーが何をしているのかわかりません。私がやりたいのは、ユーザーがでクリックしたかどうかを追跡することですiframe。私は目に見えないがあるシナリオを想像divの上をiframeし、divちょうどそのにクリックイベントを渡しますiframe。 このようなことは可能ですか?もしそうなら、それから私はそれについてどうやって行きますか?iframes広告ですので、私は使用されているタグを制御することはできません。

4
どのJavaScriptイベントが発生したかを知る方法は?
選択リストがあります: <select id="filter"> <option value="Open" selected="selected">Open</option> <option value="Closed">Closed</option> </select> Closedページを選択するとリロードします。この場合、(オープンではなく)クローズされたチケットが表示されます。手動で行うとうまくいきます。 問題は、Watirで選択Closedしたときにページがリロードされないことです。 browser.select_list(:id => "filter").select "Closed" これは通常、JavaScriptイベントが発生しないことを意味します。Watirでイベントを発生させることができます: browser.select_list(:id => "filter").fire_event "onclick" しかし、どのイベントを起動するかを知る必要があります。 要素に定義されているイベントを見つける方法はありますか?

8
すべてのブラウザーのObject.watch()?
Object.WatchとのObject.Observe両方が現在非推奨になっていることに注意してください(2018年6月現在)。 オブジェクトまたは変数の変更を監視する簡単な方法を探していたところObject.watch()、MozillaブラウザーではサポートされているがIEではサポートされていないことがわかりました。だから私は誰かが何らかの同等のものを書いたかどうかを探して周りを探し始めました。 私が見つけた唯一のことはjQueryプラグインですが、それが最善の方法かどうかはわかりません。私は確かにほとんどのプロジェクトでjQueryを使用しているので、jQueryの側面については心配していません... とにかく、質問:そのjQueryプラグインの実際の例を誰かに見せてもらえますか?うまく動かないのですが… または、クロスブラウザで動作するより良い代替案を誰かが知っていますか? 回答後に更新: 回答ありがとうございます!ここに投稿されたコードを試してみました:http : //webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html しかし、IEで動作させることができなかったようです。以下のコードはFirefoxでは正常に動作しますが、IEでは何も実行しません。Firefoxでは、watcher.status変更されるたびにdocument.write()in watcher.watch()が呼び出され、ページに出力が表示されます。IEではそれは起こりませんがwatcher.status、最後のdocument.write()呼び出しで正しい値が表示されるため(IEとFFの両方で)、値が更新されていることがわかります。しかし、コールバック関数が呼び出されない場合、それは一種の無意味です... :) 何か不足していますか? var options = {'status': 'no status'}, watcher = createWatcher(options); watcher.watch("status", function(prop, oldValue, newValue) { document.write("old: " + oldValue + ", new: " + newValue + "<br>"); return newValue; }); watcher.status = 'asdf'; watcher.status = '1234'; document.write(watcher.status + …


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.