Siema スライダーでドラッグ時に Aタグのクリックイベントが発生してしまう

⚠️投稿日または最終更新日から3年以上経過している内容です。

超軽量で単体で動作する素敵なスライダースクリプト siema

Siema - Lightweight and simple carousel with no dependenciesSiema is a simple and very lightweight slider / carousel plugin written in pure vanilla JavaScript without any dependencies.pawelgrzybek.com

というのを気に入ってて、最近頻繁に利用させていただいてます。

普通に使う分にはとてもいいんですが、ひとつ困ったことに、Aタグを内包している場合、ドラッグでスライドするとリンクが発火してしまうことがあります；

issues でも議題に上がっていて、調整されておられます。 https://github.com/pawelgrzybek/siema/issues/71

サンプルを見ると、確かに対応が効いています。が、Aタグの中に、imgタグが入っていると、それでもリンクが発生してしまいます ><;

↓のようなケース

html

<div class="siema">
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
    <div><a href="hoge.html"><img src="hoge.jpg" alt=""></a></div>
</div>

最初は JS 側での制御を考えましたが、これがなかなか難しく、最後は諦めたのですが、、、。

考え方を変えて、 img のマウスイベントを失くしてしまえば良いのでは？と思い、↓のような CSS を当ててみたところ

css

.siema a img {
    pointer-events: none;
}

うまくいきました～！👌