イベントをキャンセルする方法
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
下記のような外部 javascript ファイル（下記が全文です）を設置し、「body {max-width: 400px;}」として、画面の左右50px以内をタップするとページを遷移するようにしていて、その機能自体は問題なく動きます。
ここで、タップした場所にリンクが貼ってあるようなときにも、リンクよりイベントが優先されてしまうのですが、ここを回避するには、どの位置にどのような javascript コード（jQuery は使わない）を書けば良いでしょうか？
つまり、「<a href="hoge">fuga</a>」や「<tag onClick='hoge;'>fuga</tag>」というような html が書かれた場所で「fuga」をタップした場合に、タップ・クリック関係のイベントをキャンセルする方法を探しています。
なお、コードに冗長な表現がありましたら、参考のため、ご指摘いただけると幸いです。
【コードの解説】
02:全ページURL「～～/***.html」の「***」の部分だけを配列 filenames に格納。
03:現ページURLから「***」の部分だけを変数 filename に格納。
04:配列 filenames の中での filename の位置を検索し、filenames の中での次のインデックスを「次ページのURL」として、変数 next_href に格納。
07:同様に、filenames の中での前のインデックスを「前ページのURL」として、変数 prev_href に格納。
09:touchstart イベントが発生する場合は（スマホとして検知し）、イベント変数 e_touchstart に「touchstart」を、そうでなければ「mousedown」を割り当て。
11:同様に、前者は「タップしたところの event.touches[0].pageX」を、
12:後者は、「クリックしたところの event.pageX」を変数 touchStartX に格納。
13:touchStartX が 350px より大きければ（画面右端をタップすれば）、next_href（次ページ）に、
14:50px より小さければ（左端なら）、prev_href（前ページ）に遷移。
ここで、タップした場所にリンクが貼ってあるようなときにも、リンクよりイベントが優先されてしまうのですが、ここを回避するには、どの位置にどのような javascript コード（jQuery は使わない）を書けば良いでしょうか？
つまり、「<a href="hoge">fuga</a>」や「<tag onClick='hoge;'>fuga</tag>」というような html が書かれた場所で「fuga」をタップした場合に、タップ・クリック関係のイベントをキャンセルする方法を探しています。
なお、コードに冗長な表現がありましたら、参考のため、ご指摘いただけると幸いです。
01:window.addEventListener('load', function(event) {
02: var filenames = ['00','01','011','011_01',・・・,'00']; //「・・・」の部分、配列要素を省略しています。
03: var filename = document.location.pathname.split('/').pop().split('.')[0];
04: var next_href = filenames[filenames.indexOf(filename) +1] + '.html';
05: var prev_href;
06: if (filename == '00') {prev_href = 'javascript:alert("これより前のページはありません。");';}
07: else {prev_href = filenames[filenames.indexOf(filename) -1] + '.html';}
08: var touchStartX;
09: var e_touchstart = window.ontouchstart === null? 'touchstart' : 'mousedown';
10: window.addEventListener(e_touchstart, function(event) {
11: if(window.ontouchstart === null) {touchStartX = event.touches[0].pageX;}
12: else {touchStartX = event.pageX;}
13: if (touchStartX > 350) {document.location.href = next_href;}
14: else if (touchStartX < 50) {document.location.href = prev_href;}
15: }, false);
16:}, false);
02: var filenames = ['00','01','011','011_01',・・・,'00']; //「・・・」の部分、配列要素を省略しています。
03: var filename = document.location.pathname.split('/').pop().split('.')[0];
04: var next_href = filenames[filenames.indexOf(filename) +1] + '.html';
05: var prev_href;
06: if (filename == '00') {prev_href = 'javascript:alert("これより前のページはありません。");';}
07: else {prev_href = filenames[filenames.indexOf(filename) -1] + '.html';}
08: var touchStartX;
09: var e_touchstart = window.ontouchstart === null? 'touchstart' : 'mousedown';
10: window.addEventListener(e_touchstart, function(event) {
11: if(window.ontouchstart === null) {touchStartX = event.touches[0].pageX;}
12: else {touchStartX = event.pageX;}
13: if (touchStartX > 350) {document.location.href = next_href;}
14: else if (touchStartX < 50) {document.location.href = prev_href;}
15: }, false);
16:}, false);
【コードの解説】
02:全ページURL「～～/***.html」の「***」の部分だけを配列 filenames に格納。
03:現ページURLから「***」の部分だけを変数 filename に格納。
04:配列 filenames の中での filename の位置を検索し、filenames の中での次のインデックスを「次ページのURL」として、変数 next_href に格納。
07:同様に、filenames の中での前のインデックスを「前ページのURL」として、変数 prev_href に格納。
09:touchstart イベントが発生する場合は（スマホとして検知し）、イベント変数 e_touchstart に「touchstart」を、そうでなければ「mousedown」を割り当て。
11:同様に、前者は「タップしたところの event.touches[0].pageX」を、
12:後者は、「クリックしたところの event.pageX」を変数 touchStartX に格納。
13:touchStartX が 350px より大きければ（画面右端をタップすれば）、next_href（次ページ）に、
14:50px より小さければ（左端なら）、prev_href（前ページ）に遷移。
DOUGLAS さん
12月24日 06時01分
わぁ、スミマセン。
初投稿なのに、ご挨拶もしていませんでした。DOUGLAS と申します。
ネットで検索して、こちらを発見し、質問したのですが、自己解決してしまいました。
11: ～ 14: を
で挟んだら、希望のことが出来ました。
大変、お騒がせいたしました。
なお、当方、Google Chrome 71.0.3578.98 を使っているのですが、このサイトにおいて「新規の質問を投稿する」とき、「本文」内に［code］を記載した場合、「入力内容を確認する」場面で、［code］以外の部分も、［code］欄と同じように表示され、「div#content」が「div#sidebar」の下に隠れてしまって、入力内容が確認できませんでしたので、取り敢えず、css に、
.table-form {table-layout: fixed;}
と付け加えて投稿いたしました。
初投稿なのに、ご挨拶もしていませんでした。DOUGLAS と申します。
ネットで検索して、こちらを発見し、質問したのですが、自己解決してしまいました。
11: ～ 14: を
if (event.target.hash !== '' && typeof event.target.onclick !== 'function') {
}
}
で挟んだら、希望のことが出来ました。
大変、お騒がせいたしました。
なお、当方、Google Chrome 71.0.3578.98 を使っているのですが、このサイトにおいて「新規の質問を投稿する」とき、「本文」内に［code］を記載した場合、「入力内容を確認する」場面で、［code］以外の部分も、［code］欄と同じように表示され、「div#content」が「div#sidebar」の下に隠れてしまって、入力内容が確認できませんでしたので、取り敢えず、css に、
.table-form {table-layout: fixed;}
と付け加えて投稿いたしました。
DOUGLAS さん
12月24日 10時55分
DOUGLASさん、はじめまして。
今日は朝から出ており、スマホから内容を確認していたのですが、ぱっとは思いつかなかったので戻ってからレスを……と思っておりました。
解決されたとのこと、たしかにコードを読むとなるほどと思います。
JavaScriptは必要に迫られた時くらいしか最近は書いていないので、勉強になりました。
ありがとうございます。
ご挨拶の件は、言われなければ気づかないくらいでしたので(汗)全くお気になさらないでください。
【code】の不具合も情報ありがとうございます。
当方にも不具合が確認できました。大変ご迷惑をお掛けしました。
その他【code】内の右側の文字が入力確認時にサイドバーに隠れてしまったり等、かなり昔に作ったものなので作り直したい衝動に駆られます(汗)
この度は直接お役に立てず大変恐縮です。
また何かありましたらお気軽にご投稿ください。
今日は朝から出ており、スマホから内容を確認していたのですが、ぱっとは思いつかなかったので戻ってからレスを……と思っておりました。
解決されたとのこと、たしかにコードを読むとなるほどと思います。
JavaScriptは必要に迫られた時くらいしか最近は書いていないので、勉強になりました。
ありがとうございます。
ご挨拶の件は、言われなければ気づかないくらいでしたので(汗)全くお気になさらないでください。
【code】の不具合も情報ありがとうございます。
当方にも不具合が確認できました。大変ご迷惑をお掛けしました。
その他【code】内の右側の文字が入力確認時にサイドバーに隠れてしまったり等、かなり昔に作ったものなので作り直したい衝動に駆られます(汗)
この度は直接お役に立てず大変恐縮です。
また何かありましたらお気軽にご投稿ください。
馬場誠 さん
12月24日 15時01分
