[#のついたリンクが押されたときイベントを発火させたい]

Question

<a href="#aaa">AAA</a>
<a href="#bbb">BBB</a>
<a href="#ccc">CCC</a>

といったリンクがあったとして、
「#aaaのリンクが押されたとき」などではなく
「#のついたリンクが押されたときにイベントを発火させたい」時は
どのように書いたら良いでしょうか？

idやclass付いている場合は

ui: {
  testPage  : 'id_or_className'
},
events: {
  'change @ui.testPage'  : 'testPage'
},

testPage(){
  // 処理
}

といった感じになりますが、＃リンクの時が分かりません。
教えていただけると幸いでございます。
宜しくお願い致します。

Comments

[think49]

音沙汰がないようですが、意に沿わない回答だったのでしょうか。何らかのレスポンスが欲しいところです。

Answer 1

Marionette.jsを使っているという前提で回答させていただきます。

以下のように記述すれば、href属性が'#'で始まるa要素に対するクリックイベントを捕捉できるかと思います。

ui: {
  testPage: 'a[href^=\'#\']'
},
events: {
  'click @ui.testPage'  : 'testPage'
},

testPage(){
  // 処理
}

Answer 2

前方一致なら jQuery('a[href^=#]')で、部分一致なら jQuery('a[href*=#]') を使用して下さい。
jQuery を使わないなら querySelectorAll() を使って下さい。

<a href="#aaa">AAA</a>
<a href="#bbb">BBB</a>
<a href="#ccc">CCC</a>
<script>
'use strict';
jQuery('a[href^=#]').on('click', function (event) { console.log(event.type); });
</script>

Re: star24star さん

Answer 3

クリックしたときにhrefを正規表現でチェックする感じです。

$("a").click(function(){
    var a_link = $(this).attr("href");
    var regexp = /^#.+/;
    
    if(regexp.test(a_link)){
        //「#」が先頭についていたときの処理
    }
});