CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。

pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。

参考:
Can I use… pointer-events

CSSでdisabledをつける

例えば、inputやbutton要素に使えるdisabledのような挙動をaタグに指定し
見た目だけでなくクリックも無効にすることも可能です。

<br />
a[disabled=&quot;disabled&quot;] {<br />
	pointer-event:none;<br />
}<br />

チェックがついた項目のリンクとボタンを無効化

一覧項目にチェックが入ったら、リンクとボタンを無効化する仕組みをCSSだけで実装できます。

See the Pen “disabled” in CSS pointer-event: none; by webdev (@webdev-jp-net) on CodePen.0

該当部分を抜き出すと、このようになります。
input[type=”checkbox”]:checkedの隣接でスタイルを適用させています。

<br />
&lt;div class=&quot;item&quot;&gt;<br />
	&lt;input type=&quot;checkbox&quot; id=&quot;c_1&quot; checked=&quot;checked&quot; /&gt;<br />
	&lt;label for=&quot;c_1&quot;&gt;&lt;/label&gt;<br />
	&lt;div class=&quot;data&quot;&gt;<br />
		&lt;span class=&quot;date&quot;&gt;2016/10/10&lt;/span&gt;<br />
		&lt;span class=&quot;title&quot;&gt;dummy item 01&lt;/span&gt;<br />
		&lt;span class=&quot;detail&quot;&gt;Aaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;<br />
		&lt;a href=&quot;#dummy&quot; class=&quot;link-area&quot;&gt;&lt;/a&gt;<br />
	&lt;/div&gt;<br />
	&lt;div class=&quot;control&quot;&gt;<br />
		&lt;button type=&quot;button&quot; class=&quot;edit&quot;&gt;&lt;/button&gt;<br />
		&lt;button type=&quot;button&quot; class=&quot;delete&quot;&gt;&lt;/button&gt;<br />
	&lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
input[type=&quot;checkbox&quot;]:checked + label + .data:hover {<br />
	color: inherit;<br />
}<br />
input[type=&quot;checkbox&quot;]:checked + label + .data a {<br />
	pointer-event: none;<br />
	cursor: default;<br />
}<br />
input[type=&quot;checkbox&quot;]:checked + label + .data + .control button {<br />
	pointer-event: none;<br />
	cursor: default;<br />
	opacity: .3;<br />
}<br />
/* pointer-eventではCSSで指定したhover効果はキャンセル不可なので上書き指定します */<br />
input[type=&quot;checkbox&quot;]:checked + label + .data + .control button.edit:hover {<br />
	background-image: /* 通常時の画像 */;<br />
}<br />
input[type=&quot;checkbox&quot;]:checked + label + .data + .control button.delete:hover {<br />
	background-image: /* 通常時の画像 */;<br />
}<br />

実験してみたところ、pointer-eventではCSSで指定したhover効果はキャンセルできませんでした。
そのため、hoverを打ち消したい場合はhover適用前のスタイルを上書き設定しています。

関連記事