こんにちは。

佐藤です。

 

 

 

 

最近作業してて驚いたのですが、

 

 

スライダープラグインbxSliderがアップデート後のchromeで

スライド内のリンクをクリックしても反応しなくなってました。

※クロームバージョン: 73.0.3683.86(Official Build)(64 ビット)(windows)

 

同じ現象はbxSliderだけじゃないでしょうし

今後のchromeのアップデートで直る可能性も大いにあるのですが

その保証もありませんし、いつになるかもわからないので対応策のご紹介です。

 

 

 

 

対応策①

「mousedown」で対策する

//単純なタイプ、ページ内リンクだけの場合は基本これでＯＫ
$(document).on('mousedown','.bx-viewport a',function(){
  window.location.href = $(this).attr('href');
});

//target='_blank'にも対応したタイプ、target='_blank'を使いたい場合はこちらを設定
$(document).on('mousedown','.bx-viewport a',function(){
  var $this = $(this),
      myHref = $this.attr('href'),
      myTarget = $this.attr('target');
  if(myTarget === '_blank'){
    window.open(myHref);
  }else{
    window.location.href = myHref;
  }
});

 

調べてみるとマウスを押した状態から離す際のイベントがうまく取得できない様で、”click”や”mouseleave”といったイベントが不発となってしまうみたいです。

でもなぜかマウスを押し込んだ際のイベントである”mousedown”は取得できるので

“mousedown”を利用したパターンとなります。

 

ただ、クリックを押した瞬間aタグのリンク先へ移動するので微妙に操作感が変わります。

 

スライド内に”click”で発火する何かしらを入れている場合

「.bx-viewport a」を対象のものに変更して

「window.location.href~」のくだりを

$(this).triger(‘click’)に変えれば発火します。

 

 

 

 

 

対策②

bxSliderのオプションの「touchEnabled」を’false’に設定する。

$('.target').bxSlider({
  touchEnabled:false,
});

bxSliderのオプションである「touchEnabled」をfalseにするパターンです。

この機能はスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能で、

デフォルトで有効になっています。

 

これをfalseに設定するともちろんドラッグでの切り替えはできなくなります。

 

 

 

以上2つの方法でchromeでもリンクを有効にできます。

今回bxSliderの場合の対処でしたが、他のプラグインや自前のコードでも起きる問題だと思われます。

その時は対策①の’.bx-wrapper a’を書き換えれば基本は対応できると思いますのでお試し下さい。

 

 

2019.05.22訂正

“.bx-wrapper”を”.bx-viewport”に修正。

※”.bx-wrapper”だとページャーに悪影響を及ぼします。

 

2021.01.25

完全版はコチラ