Q&A
e.preventDefault(); // ナビゲートをキャンセル
これのせいで効かなくなっている、というのは認識済みですか？
> jsで新しタブで開く指定をしても、ダメでした。。
これがよくわかりませんでした。window.open() を使えば新しいウィンドウなどは開くと思いますのでどうしたのかすべてのコードを書いていただければと思います
前提・実現したいこと
リンク先を新しいウィンドウで開きたいのですが、開かない。
（target="_blank"が効かない。）
ここに質問の内容を詳しく書いてください。
html形式でコーディングをしています。
発生している問題・エラーメッセージ
target_blankが昨日しません。
jsで下記を入れているからかな‥？と思うのですが
知識がなく、ご経験のある方にお伺いしたいです。
該当のソースコード
リンクを貼ろうとしているHTMLは下記です。
<div class="flex-child"> <figure class="snip1273"> <img src="img/doukoku12.png" alt="sample86"/> <figcaption> <h3>◯◯◯◯◯◯◯◯</h3> <p>◯◯◯◯◯◯◯</p> </figcaption> <a href="link/bunsyou21.html" target="_blank"></a> </figure> </div><!--div flex-child-->
ホバーエフェクト
$(".hover").mouseleave( function () { $(this).removeClass("hover"); } ); $(window).on('load', function(){ $('body').removeClass('fadeout'); }); コード
モーダルウィンドウ↓
// ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー $('a:not([href^="#"]):not([target]):not([data-lity])').on('click', function(e){ e.preventDefault(); // ナビゲートをキャンセル url = $(this).attr('href'); // 遷移先のURLを取得 if (url !== '') { $('body').addClass('fadeout'); // bodyに class="fadeout"を挿入 setTimeout(function(){ window.location = url; // 0.8秒後に取得したURLに遷移 }, 800); } return false;ß }); });
試したこと
jsで新しタブで開く指定をしても、ダメでした。。
入れたのは下記です。
function externalLinks(){ if(!document.getElementsByTagName){ return; } var _1=document.getElementsByTagName("a"); for(var i=0;i<_1.length;i++){ var _3=_1[i]; if(_3.getAttribute("href")&&_3.getAttribute("rel")==="external"){ _3.target="_blank"; } } } window.onload=externalLinks;
みなさま御多用のところ申し訳ありませんが
どなたか、解決のヒントをくださると幸いです。
宜しくお願いいたします。
コードはマークダウンのcode機能を利用してご提示ください
あとHTMLもご提示ください。
<a href="..." target="_blank">のように書いているということですか？
それとも JavaScript によって target 属性をつけているのでしょうか？
tatsunosuke様の記載のコードについて、何もわからずコピペしていました‥。申し訳ありません。
解決しました。ありがとうございます。ベストアンサーにさせていただきたいので、ご回答に何か入れていただけますと幸いです。
モーダルウィンドウのコードはかっこの対応が合っていないようです。
そちらを修正して、当方で試したところ、別タブで開きましたので、問題が再現しませんでした。
環境の問題か、ご提示いただいていない部分のコードに問題があるかと思います。
回答2件
0
ベストアンサー
e.preventDefault(); // ナビゲートをキャンセル
のあとに適切な処理が入っていないことが問題・・・で解決した・・・ようなので、
それを修正したコードを最終版として書いてもらえるのが一番かなと思いました！
投稿2019/05/28 08:30
総合スコア1292
解決しました。ありがとうございます！
ちょっと待ってください。
わざわざ target 属性をつける処理が無駄になってしまうのでは？
この質問は前回の続きだと思っているので、そもそもこの処理に入るのが問題と思っています。
https://teratail.com/questions/153481
target属性を処理が無駄というのは、それを指定しなくてもいいということでしょうか？無知で申し訳ないです‥。前回の続きです、見ていただき、ありがとうございます。
そもそもセレクタで target属性 がついているものは処理しないようにしているのです。
だから以下のことを聞きました。
<a href="..." target="_blank">のように書いているということですか？
それとも JavaScript によって target 属性をつけているのでしょうか？
JSが無効な場合に別なウィンドウが開く、有効な場合は開き方の処理に特徴を加える、って、それなりにありえる処理かなと思いますがそうでもないですか？
（まあいまどきJSが無効なことなんて気にしないでしょうけど）
targetで指定しているのですが、今テストしてみたところ、新しいウィンドウで開くので、それで解決したのかな？と思っておりました‥。JSで指定したほうがよいのでしょうか？
ちょっと何をしたいのかとどういうつもりでコードを書いたのかは整理したほうがいいかもしれませんね...
e.preventDefault() がなければ、 target="_blank" の記述が有効になり、ウィンドウは新規で開かれる、ということになって、それが希望の動作であればそれはそれで問題はないですよね。
e.preventDefault() はやはり必要で、JSを使ってウィンドウを開きたかった（その明確な理由があった...例えばウィンドウサイズを指定するとか）のであれば、その書き方にしないといけないですよね。
（なので、teratailの趣旨も踏まえて結果的に解決されたコードがあるとよいなと）
tetsunosuke様 ありがとうございます。私の希望としては、ある部分ではリンクでdate-lityのJSが作動すること、別の部分ではリンクを新しいウィンドウで開くこと、です。なので、JSでウィンドウを開きたいというのはどちらもでよいので、現状、e.preventDefault() を削除してもdate-lityが作動しているのでそちらを削除で対応しようかと思っています。分かりづらい書き方で申し訳ありません。。
not([data-lity]) というのはそのへんの意味があるのですね。
さて、となると、 [target]が意図どおりに動いていないのでは？という気にもなってきました。
「新しいウィンドウを開く箇所」ではtarget指定がされており、そこでは
$('body').addClass('fadeout');
の処理は動いてほしくないのでは？と思ったのです。
現時点で解決しているようであれば良いですが、本当に思ったとおりには動いていないかも？
と思ったまでです。
やはりおかしいようであれば色々調べたりした上で再質問してみてください！
https://gist.githack.com/tetsunosuke/0eab7c293f18d3b3a443165d26f54720/raw/6b7f4601c760dcb8629f19bc62c0c1616e2fc7ea/gistfile1.html?cache=false#
もしかしてこういうことだったのでは・・・と思ったのでチョット書いてみました。
0
提示されたスクリプトが意図通りに動くかは実行タイミングによりますが、.on() で selector を指定することでタイミングを気にしないように書くこともできます。
JavaScript
1 //$('a:not([href^="#"]):not([target]):not([data-lity])').on('click', function(e){ 2 $(document).on('click', 'a:not([href^="#"]):not([target]):not([data-lity])', function(e){
投稿2019/05/28 08:28
総合スコア13749
あなたの回答
tips
プレビュー
