【jQuery】ページ内リンクが競合している時

ページ内リンク(#○○)を使ってページ内遷移やモーダルの呼び出しを行った時の競合を避ける方法

cssやjQueryの”not()”を使う方法

競合をしている場合は一度イベント処理を中止して新しく書き直す

cssだったら否定擬似クラス:not()を使えばいい

//　.no-functionを除外
$('a[href^="#"]:not(.no-function)').on("click", (e) => {
    e.preventDefault();// イベント処理を中断
    //　ここに行いたい処理
    console.log("「.no-function」以外がクリックされたら出力");
});

jQueryだったらnot()メソッドを使える

//　.no-functionを除外
$('a[href^="#"]').not('.no-function').on("click", (e) => {
    e.preventDefault();// イベント処理を中断
    //　ここに行いたい処理
    console.log("「.no-function」以外がクリックされたら出力");
});

HTMLのonclick属性で実装する

そもそもaタグ使わないでbuttonタグに直接指定することもできるなぁって思った

<script>
function test() {
    console.log('ボタンがクリックされたよー');
}
</script>

<button input="button" onclick="test()">ボタン</button>

ただ、es6の書き方で使おうとするとコンパイルする必要性があるし、実際の制作で見ることあまりないんだよなぁ
だから、HTMLのonclick属性もそういえば使えるなぁって思い備忘録に書いた