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タグに指定し
見た目だけでなくクリックも無効にすることも可能です。

a[disabled="disabled"] {
	pointer-event:none;
}

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

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

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

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

<div class="item">
	<input type="checkbox" id="c_1" checked="checked" />
	<label for="c_1"></label>
	<div class="data">
		<span class="date">2016/10/10</span>
		<span class="title">dummy item 01</span>
		<span class="detail">Aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
		<a href="#dummy" class="link-area"></a>
	</div>
	<div class="control">
		<button type="button" class="edit"></button>
		<button type="button" class="delete"></button>
	</div>
</div>
input[type="checkbox"]:checked + label + .data:hover {
	color: inherit;
}
input[type="checkbox"]:checked + label + .data a {
	pointer-event: none;
	cursor: default;
}
input[type="checkbox"]:checked + label + .data + .control button {
	pointer-event: none;
	cursor: default;
	opacity: .3;
}
/* pointer-eventではCSSで指定したhover効果はキャンセル不可なので上書き指定します */
input[type="checkbox"]:checked + label + .data + .control button.edit:hover {
	background-image: /* 通常時の画像 */;
}
input[type="checkbox"]:checked + label + .data + .control button.delete:hover {
	background-image: /* 通常時の画像 */;
}

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

関連記事

Pocket