HTMLタグ<a>は、hrefとonclickの両方を追加したい


123

HTMLタグについて質問したい

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

これをhrefonClickで動作するタグにする方法は?(最初に実行してからhrefを実行することをお勧めします)

回答:


231

必要なものはすでにあり、構文が少し変更されています。

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

<a>タグのonclickおよびhrefプロパティのデフォルトの動作は、を実行しonclick、が返されないhref限りに従い、イベントをキャンセルします(または、イベントは防止されていません)。onclickfalse


element.addEventListener関数でこれを行う方法もありますか?
TheEquah 2017

4
href="#"実際のURLの代わりにそこに置くまで、私には機能しません。
yegor256 2017

私はlaravelフレームワークを使用しているので、ブレードビューでこれを含めましたが、機能していません。誰かがlaravelでこれを試しましたか?
Vajira Prabuddhaka

hrefのmvcコントローラーで呼び出されるアクションメソッドがある場合、このソリューションは機能しません。誰か助けてもらえますか?
DharaPPatel

10

jQueryを使用します。clickイベントをキャプチャして、Webサイトにアクセスする必要があります。

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>


11
JavaScriptフレームワークは使用しません。しかし、あなたの答えをありがとう

7
上記は実際のリンクではありません。新しいタブで開くことはできず、非常に悪い習慣です。新しいタブで何かを開くことができる場合(URLを持っている場合)は、常に意味のあるhref属性を追加してください。
Nux

2

これを実現するには、次のhtmlを使用します。

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

こちらが動作例です。


これは私にとってChromeで機能しますが、Safariは機能を実行しているようですが、hrefを開きません...何か提案がありますか?
Ben

@Ben私はJSなしのフィドルでテストを行いました-純粋なhtmlのみ:<a href="http://example.com" >Item</a>Chromeでは、ページがこのリンクを実行できるようにするためのメッセージが表示されます(ChromeのURLバーの最後にアラート)。[ブロックされた]のページ:コンソールでのサファリでは、私はwarrning見るfiddle.jshell.net/_displayがから安全でないコンテンツを表示するためには許されなかったexample.comので、おそらくこれは、いくつかのセキュリティ上の問題である(?のみフィドル上) -
カミルKiełczewski

1

jQueryは必要ありません。

一部の人々は使用onclickが悪い習慣だと言います...

この例では、純粋なブラウザのJavaScriptを使用しています。デフォルトでは、クリックハンドラーがナビゲーションの前に評価されるように見えるため、必要に応じてナビゲーションをキャンセルして独自に行うことができます。

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

-1

ng-click代わりに使用しonclickます。そしてそれと同じくらい簡単です:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

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