web-dev-qa-db-ja.com

onclickが実行された場合、HREFを無効にするにはどうすればよいですか？

bothHREFおよびONCLICK属性が設定されたアンカーがあります。クリックしてJavascriptが有効になっている場合、onlyONCLICKを実行し、HREFを無視します。同様に、Javascriptが無効またはサポートされていない場合、HREF URLを追跡し、ONCLICKを無視するようにします。以下は私がやっていることの例で、JSを実行し、同時にリンクをたどります（通常、JSが実行されてからページが変更されます）。

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

これを行う最良の方法は何ですか？

Javascriptの回答を期待していますが、特にPHPで実行できる場合は、機能する限り、どのような方法でも受け入れます。 「 javascript onclick関数が終了する前にhrefリンクが実行され、ページがリダイレクトされます 」と読みましたが、HREFを遅らせるだけですが、完全に無効にするわけではありません。もっと簡単なものも探しています。

htmlonclickanchorhref
76
Supuhstar

onclick属性にreturnを最初に入れると、最初の未編集のソリューションを使用できます。

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

例： https://jsfiddle.net/FXkgV/289/

37
elproduc3r
    yes_js_login = function() {
         // Your code here
         return false;
    }

Falseを返す場合、デフォルトのアクション（hrefに移動）を防ぐ必要があります。

編集：申し訳ありませんが、動作しないようです。代わりに次の操作を実行できます。

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>
56
Chris Bier

preventDefault を使用してデフォルトのブラウザの動作を無効にし、HTML内でeventを渡すだけです。

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}
27
Buksy
<a href="http://www.google.com" class="ignore-click">Test</a>

with jQuery：

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

JavaScriptを使用

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

クラス.ignore-clickを好きなだけ要素に割り当て、それらの要素をクリックしても無視されます

14
Andrew

次の簡単なコードを使用できます。

<a href="" onclick="return false;">add new action</a><br>
12
mishanon

次のようなイベントパラメータを渡すと簡単です。

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}
5
Trigon219

これが役立つかもしれません。 JQueryは必要ありません

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

このコードは次のことを行います。相対リンクを Google Docs Viewer に渡します

  1. this.hrefでアンカーの完全リンクバージョンを取得します
  2. リンクを新しいウィンドウで開きます。

あなたの場合、これはうまくいくかもしれません：

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">
1
marlo

Js関数が呼び出し元の要素への参照を必要とする、通常のURLまたはjavascript呼び出しを代わりに処理する要素のテンプレートが必要な状況を解決しました。 javascriptでは、「this」はフォーム要素（ボタンなど）のコンテキストでのみ自己参照として機能します。私はボタンが欲しくなく、通常のリンクの外観だけが欲しかった。

例：

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

Href属性とonClick属性の値は同じですが、javascript呼び出しの場合にonClickに「return false」を追加することを除きます。呼び出された関数に「falseを返す」機能はありませんでした。

1
Bo Johanson

私の場合、ユーザーが「a」要素をクリックしたときに条件が発生しました。条件は次のとおりです。

他のセクションに10を超えるアイテムがある場合、ユーザーは他のページにリダイレクトされません。

他のセクションのアイテムが10個未満の場合、ユーザーは他のページにリダイレクトされます。

「a」要素の機能は、他のコンポーネントに依存します。クリックイベント内のコードは次のとおりです。

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}
0
Jorge Santos Neill

これは私のために働いた：

<a href="" onclick="return false;">Action</a>
0
Zero