bxSliderでクリックできない時

HTML/CSS JavaScript jQuery

bxSlider は特に何もしないとスライド内に <a> を置いてもクリックできない（無視される）もよう。
v4.2.5 だとPCはクリックできないけどスマホやタブレットならタップはできるという変な挙動。
v4.2.15 だとPCもスマホもタブレットもタップできなくなっているもよう。

以下は v4.2.5 の例。まずは普通は<a>クリックしても無視される。

対策① bxSliderオプション touchEnabled: false

ただし<a>クリックはできるけど、マウスドラッグでのスライド移動ができなくなってしまう。

対策② <a>要素のイベントを先につかまえて自力クリック発火

bxSliderより先に <a>の touchstart MSPointerDown pointerdown イベントをつかまえて、自力でクリック判定＆イベント発火させる。bxSliderより前で以下を実行。

$('.slider a').on('touchstart MSPointerDown pointerdown', function(ev){
    if( 2 < ev.which ) return;
    if( /(iPhone|iPad|iPod|Android)/i.test(navigator.userAgent) ) return;
    var a = this;
    var down = ev;
    var drag = false;
    $(document).on('touchmove MSPointerMove pointermove', move);
    $(document).one('touchend MSPointerUp pointerup', up);
    function move(ev){
        if( 1 < Math.abs(ev.pageX - down.pageX) ) drag = true;
        if( 1 < Math.abs(ev.pageY - down.pageY) ) drag = true;
    }
    function up(){
        $(document).off('touchmove MSPointerMove pointermove', move);
        if( !drag ) a.click();
    }
});

<a>クリックできて、ドラッグでのスライド移動もできる。