4

イベントを地図に表示するウェブサイトに取り組んでいます。ユーザーがイベント画鋲にカーソルを合わせると、ツールチップ情報ウィンドウが表示され、イベント情報が表示されます。ユーザーが画鋲をクリックすると、イベントの近くにズームする必要があります。

この機能はFirefoxを除くすべてのブラウザで機能します。何らかの理由で、各画鋲divのクリックイベントは発生しません。マウスオーバーイベントは問題なく発生するため、これは特に奇妙です。エラーも表示されません。

$(document).on('click', 'div.pushpin', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

これが私のウェブサイトです：http ：//www.raveradar.com/qa

ChromeとFirefoxでどのように機能するかを比較して、問題を確認できます。

jsFiddleを作成して問題を切り分けようとしました。しかし、クリックイベントはフィドルで問題なく発生します：http：//jsfiddle.net/acraswell/9TxQg/4/

この時点で、私は実際に2番目の目を使って自分の仕事をチェックすることができました。

編集： 「position：fixed;」を無効にすると、私は気づきました。「pushpin-icon」画像のCSSプロパティで、突然アイコンをクリックすると正常に機能します。

編集2： 問題を解決できました。以下の解決策をご覧ください。それが本当の質問だったので、元のコードが最初に壊れた理由を説明できる人なら誰にでも答えを与えます。

4

4 に答える 4

3

編集

私はあなたのcssであなたのためにそれを絞り込んだと思います。私はあなたが使用pointer-events: all;していることに気づきました。

警告: 非 SVG 要素に対する CSS でのポインター イベントの使用は実験的なものです。この機能は、以前は CSS3 UI ドラフト仕様の一部でしたが、未解決の問題が多数あるため、CSS4 に延期されました。

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

それがFirefoxで問題を引き起こしていると思います.cssとinline cssからそれらを削除して試してください

クリックイベントは、画像ではなく数字をクリックした場合にのみ機能しますdiv.pushpinの代わりに画像にクリックイベントをバインドしてみてください

$(document).on('click', 'img.pushpin-icon', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

両方のイベントが同じことをしている場合は、イベントを組み合わせることができます

   $(document).on('click mouseover', 'img.pushpin-icon', function () {
      alert('Detected a click!');
    });
于 2013-01-06T12:05:37.010 に答える
1

on() 関数の代わりに特定の click() 関数を使用しようとしましたか?

$("img.pushpin-icon").click(function(){alert("clicky");});

編集: 画鋲ではなく「画鋲アイコン」を使用

于 2013-01-06T11:52:49.207 に答える
1

何時間ものトラブルシューティングの後、問題を解決しました。私が取った手順は次のとおりです。

1) 前述のようposition: fixedに、画像の属性を削除.pushpin-iconすると、クリック イベントがトリガーされるように見えました。

2) .pushpin-icon「img」タグをに変更しdiv、「background-image」CSS プロパティを使用してアイコン画像を設定しました。

3)position: fixed;プロパティがなくなったので、.pushpin子供たちの相対的な位置を調整する必要がありました。

今ではうまく機能しているようです。そもそもなぜうまくいかなかったのか、それが本当の問題でした。理由がわかる方に回答を差し上げます。

サイトの変更を参照してください: http://www.raveradar.com/qa

画鋲をクリックすると、メッセージがコンソールに記録されます。

于 2013-01-06T22:39:46.997 に答える
-1

あなたのウェブサイトは firefox ではすべてを適切にロードしますが、Chrome ではロードしません。これが、Chrome で onClick() が起動されない理由です。$(document).on() は、ロードされる予定の要素にリスナーをアタッチしますが、まだロードされていません。pushpinリスナーを の代わりに に直接アタッチできる場合、リスナーは画鋲の読み込みが完了した後documentに にアタッチさpushpinれ、次に onClick() が呼び出されます。この他の SO の質問とその回答を確認してください。同様の問題が解決されます。

Jquery Document.on()

問題全体を解決するわけではありませんが、次のように絞り込みます。要素が Chrome によって読み込まれていないため、onClick() が起動されません。Chrome がそれを行っている理由がわかれば、解決策があります。その間、リスナーを要素の特定の ID/クラスにアタッチできます。

于 2013-01-06T11:53:41.217 に答える