超軽量で単体で動作する素敵なスライダースクリプト siema
https://pawelgrzybek.github.io/siema/
というのを気に入ってて、最近頻繁に使用させていただいてます。
普通に使う分にはとてもいいんですが、
ひとつ困ったことに、Aタグを内包している場合、ドラッグでスライドするとリンクが発火してしまうことがあります;
issues でも議題に上がっていて、調整されておられます。
https://github.com/pawelgrzybek/siema/issues/71
サンプルを見ると、確かに対応が効いています。
が、Aタグの中に、imgタグが入っていると、それでもリンクが発生してしまいます ><;
↓のようなケース
最初は JS 側での制御を考えましたが、
これがなかなか難しく、最後は諦めたのですが、、、。
img のマウスイベントを失くしてしまえば良いのでは?
と思い、↓のような CSS を当ててみたところ
うまくいきました!👌
https://pawelgrzybek.github.io/siema/
というのを気に入ってて、最近頻繁に使用させていただいてます。
普通に使う分にはとてもいいんですが、
ひとつ困ったことに、Aタグを内包している場合、ドラッグでスライドするとリンクが発火してしまうことがあります;
issues でも議題に上がっていて、調整されておられます。
https://github.com/pawelgrzybek/siema/issues/71
サンプルを見ると、確かに対応が効いています。
が、Aタグの中に、imgタグが入っていると、それでもリンクが発生してしまいます ><;
↓のようなケース
<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 を当ててみたところ
.siema a img {
pointer-events: none;
}
うまくいきました!👌
コメント