タグのonclick属性から発生するカスタム関数からpreventdefaultを呼び出すアクセスイベント


119

私はこのようなリンクを持っています:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

リンクをクリックしたときにアドレスバーにa が追加されるため、preventDefault()内部を実行したいと思います(またはを使用せずに)myfunc()#return false;href='javascript:void(0);'

これは可能ですか?中に行けますかmyfunc()


6
falseを返すことの何が問題になっていますか?
Alex

5
伝播も停止する
Omu

4
return falsejQuery内の伝播のみを停止します。
cruzanmo 2014年

回答:


157

W3C準拠のブラウザーで発生したイベントのオブジェクトeventとなる関数をインラインで渡すことができると思いeventます(つまり、古いバージョンのIEでは、を確認するためにイベントハンドラー関数内での検出が必要ですwindow.event)。

簡単な例

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}
<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. そのまま実行すると、アラートの後にリンクがGoogleにリダイレクトされないことに注意してください。
  2. 次に、ハンドラーにevent渡されるをのonclickようなものに変更しe、[実行]をクリックします。アラートの後にリダイレクトが行われることに注意してください(結果ペインが白くなり、リダイレクトを示します)。

5
わかりました。パラメータを2番目に設定するだけですmyfunc(event, {a:123, b:"asdas"})
Omu

1
@Omu渡される引数eventは、関数の定義済みパラメーターリストの適切な場所にある限り、任意の場所に配置できます。最初の引数である必要はありません。たとえば、のfunction myfunc(o, e) {...}ように呼び出すことができますmyfunc({a:1, b:'hi'}, event)
cateyes 2014年

2
イベントオブジェクトを明示的に渡してキャプチャする必要はないと思います。関数で簡単に参照できます。誰か確認してもらえますか?私が意味する、イベントのないこのコードは動作するはずです:function sayHi() { event.preventDefault(); alert("hi"); }
K Vijを

111

最も簡単な解決策は次のとおりです。

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

これは実際には、JS対応のブラウザーがない場合にフォールバックを使用して、ドキュメントのキャッシュ無効化を行うための良い方法です(JSがない場合はキャッシュ無効化なし)。

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

JavaScriptが有効になっている場合は、キャッシュ無効化クエリ文字列を使用してPDFを開きます。有効でない場合は、PDFを開きます。


キャッシュの無効化だけが目的であれば、サーバー側の技術を使用してそのリンクを書き換えることができます。
mpen 2014年

それは良いでしょうが、サーバー側のコードにアクセスできません。私が持っているものを扱う。
JuLo

11

これを試して:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>

これには、すべてのクリックイベントに<script>タグが必要で、コードがより複雑になります。
somid3

jQueryも必要ですが、jQueryが存在する場合でも、これは前提条件ではありません。
不規則な小屋2014

また、ここでも同意しません。インライン関数への単純な解析は、より効果的でコードが少なくなります。
Shannon Hochkins 14

1
@ somid3、jQueryは必要ありません、パフォーマンスが心配場合は、単一の委任イベントハンドラーを使用して、次のようにページ上のすべてのアンカーに単一のリスナーのみをアタッチできます$("body").on("click","a",function(e) { e.preventDefault() });。どちらの場合も、どちらのソリューションもパフォーマンスに意味のある影響を与えません。
KyleMit 2016年

7
<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>

2
これはすべてのアンカーに適用され、すべてのリンクが壊れます。また、ページとjQueryにJavaScriptを挿入する必要があります。
Shannon Hochkins、2014

さらに、jQueryを使用する場合return false、その要素の他のすべてのイベントハンドラーが実行されなくなり、イベントが上位の要素にバブリングするのを停止するため、お勧めしません。
Stijn de Witt

6

リンクに一意のクラスを追加し、このクラスのリンクのデフォルトを防止するJavaScriptを追加します。

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>

グローバルソリューションのための興味深いアプローチ。
AFract

5

aタグからhref属性を削除することはできませんか?


1
はい、これもオプションですが、デフォルトではリンクに下線は付いていません。JavaScriptがオフになっていると、移動先のhrefは表示されません
Omu

4

onClickを使用する場合、デフォルトとは異なる何かをしたいと思います。したがって、onClickとのすべてのリンクについて:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});


2

次のようにonclickからイベントにアクセスできます。

<button onclick="yourFunc(event);">go</button>

そしてあなたのjavascript関数で、私のアドバイスはその最初の行のステートメントを次のように追加することです:

function yourFunc(e) {
    e = e ? e : event;
}

次に、どこでもeをイベント変数として使用します



0

JSライブラリまたはjQueryなし。可能であれば、素敵なポップアップウィンドウを開きます。通常のリンクを開くことに安全に失敗します。

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

そしてヘルパー関数:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.