@doublerainbowposted at 2023-02-20

JavaScriptのbody.onclickについて

Q&A

Closed

今作っている物を作りたくてプログラミングを始めた初心者です
用語等わからず失礼するかもしれませんがよろしくお願いいたします

解決したいこと

発生している問題

検索機能を付けたリンク集を作っています
複数のaタグが有ってその中の一部は、クリックした時ページに表示されている文字列をリンク先に引き渡すようにしています
一度検索したあとリンク先からブラウザバックして検索ボックスで再検索する時、PCでは問題ないのですがスマホだと検索しようと画面をタップすると前回の内容でリンク先に飛んで(戻って)しまいます
複数のaタグが有るのでbody.onclickを使っているのが原因？
解決方法を教えて下さい。

該当するソースコード

<div class="search-area">
  <form>
    <input type="text" id="search-text" placeholder="検索ワードを入力">
  </form>
  <div class="search-result">
    <div class="search-result__hit-num"></div>
        <div id="search-result__list"></div>
      </div>
    </div>

$(function () {
searchWord = function(){
var searchText = $(this).val(),
targetText;
$('.target-area li').each(function() {
targetText = $(this).text();
if (targetText.indexOf(searchText) != -1) {
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
};
$('#search-text').on('input', searchWord);
});

document.body.onclick=mess;
body.onclick=value;
function mess(e){
var o=e?e.target:
Event.target;
if(o.tagName=='A')
song = "　" + o.innerHTML + "　"
location.href = "musicbox1002.html?name=" + encodeURIComponent(song);
}

理解に時間がかかると思いますけどよろしくお願いいたします。

0 likes

1Answer

@Verclene posted at 2023-02-20

aタグの数とかスマホとか関係なくbodyに直接onclickを設定してあまつさえページ遷移を行うのはかなり愚行だと思います.
ユーザーに対しても直感的な操作とは言い難いので,標的となる要素をきちんと定めてください.
if (o.tagName == 'A')なんてするくらいだったら,はじめから$('a').on('click', function(){...}と指定してください.
あとから追加した要素にも反映させるには$('.container-look-up-for').on('click','a',function(){...})などすればOKです.

あとbody.onclick = value;などとスコープもへったくれもないコードを残しておくのはやめましょう.

1Like

Comments

@doublerainbow
Questioner
ありがとうございます！
ググったら出てきてやりたいことが出来たと喜んでいたんですけど愚行だったんですね…
ほぼ素人で、お恥ずかしい
勉強しながらで時間はかかるかも？ですけどまたコメントさせていただきます。
@doublerainbow
Questioner
これで出来ました
$('a').on('click',function (e){
var o=e?e.target:
Event.target;
song = "　" + o.innerHTML + "　"
location.href = "musicbox1003.html?name=" + encodeURIComponent(song);
})
やりたかったことこれです！
“追加した要素にも反映”の方はわからなかったけど最初の方で完璧だったのでまた勉強します
本当にありがとうございました。

Are you sure you want to delete the question?