ambar/clickable.html

## clickable.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	a {
		/*text-decoration: none;*/
	}

	b {
		display: inline-block;
		width: 14px;
		height: 13px;
		border: 0 none;
		overflow: hidden;
		vertical-align: -2px;
		background: gray;
	}

	.mr b {
		margin-right: 10px;
	}

	.bd {
		border: 1px dashed sienna;
	}

	.bg {
		background-color: sienna;
	}

	.el span {
		padding: 0 5px;
	}

	body {
		-webkit-transition: background-color .1s ease-out;
		-moz-transition: background-color .1s ease-out;
		transition: background-color .1s ease-out;
		background-color: white
	}

	body.hili {
		background-color: #fc0;
	}
	</style>
</head>
<body>

<h1>让链接全区域可点击</h1>
<ul>
	<li>文本节点和 margin 制造的间隙都不可点击</li>
	<li>仅元素可触发点击</li>
	<li>带边框或背景样式的元素也可点击</li>
</ul>

<h2>margin</h2>
<a class="link mr" href="#">
	<b></b>
	<b></b>
	<b></b>
</a>
<p>不连续，有文本节点</p>

<a class="link mr" href="#"><b></b><b></b><b></b></a>
<p>连续无文本节点</p>

<h2>hack</h2>
<a class="link mr bd" href="#">
	<b></b>
	<b></b>
	<b></b>
</a>
<p>带边框的整个区域可以点击</p>

<a class="link mr bg" href="#">
	<b></b>
	<b></b>
	<b></b>
</a>
<p>带背景的整个区域也可以点击</p>

<h2>span</h2>
<a class="link el" href="#">
	<b></b><span></span>
	<b></b><span></span>
	<b></b><span></span>
</a>
<p>元素始终可以点击</p>

<script type="text/javascript">
[].forEach.call(document.querySelectorAll('a.link'), function(link) {
	link.onclick = function(e) {
		console.info(this)
		hili()
		return false
	}
})

var cls = 'hili'

function hili() {
	document.body.classList.add(cls)
	document.body.addEventListener('webkitTransitionEnd', unhili)
	document.body.addEventListener('transitionend', unhili)
}

function unhili() {
	document.body.classList.remove(cls)
}
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	a {
	/text-decoration: none;/
	}

	b {
	display: inline-block;
	width: 14px;
	height: 13px;
	border: 0 none;
	overflow: hidden;
	vertical-align: -2px;
	background: gray;
	}

	.mr b {
	margin-right: 10px;
	}

	.bd {
	border: 1px dashed sienna;
	}

	.bg {
	background-color: sienna;
	}

	.el span {
	padding: 0 5px;
	}

	body {
	-webkit-transition: background-color .1s ease-out;
	-moz-transition: background-color .1s ease-out;
	transition: background-color .1s ease-out;
	background-color: white
	}

	body.hili {
	background-color: #fc0;
	}
	</style>
	</head>
	<body>

	<h1>让链接全区域可点击</h1>
	<ul>
	<li>文本节点和 margin 制造的间隙都不可点击</li>
	<li>仅元素可触发点击</li>
	<li>带边框或背景样式的元素也可点击</li>
	</ul>

	<h2>margin</h2>
	<a class="link mr" href="#">
	<b></b>
	<b></b>
	<b></b>
	</a>
	<p>不连续，有文本节点</p>

	<a class="link mr" href="#"><b></b><b></b><b></b></a>
	<p>连续无文本节点</p>

	<h2>hack</h2>
	<a class="link mr bd" href="#">
	<b></b>
	<b></b>
	<b></b>
	</a>
	<p>带边框的整个区域可以点击</p>

	<a class="link mr bg" href="#">
	<b></b>
	<b></b>
	<b></b>
	</a>
	<p>带背景的整个区域也可以点击</p>

	<h2>span</h2>
	<a class="link el" href="#">
	<b></b><span></span>
	<b></b><span></span>
	<b></b><span></span>
	</a>
	<p>元素始终可以点击</p>

	<script type="text/javascript">
	[].forEach.call(document.querySelectorAll('a.link'), function(link) {
	link.onclick = function(e) {
	console.info(this)
	hili()
	return false
	}
	})

	var cls = 'hili'

	function hili() {
	document.body.classList.add(cls)
	document.body.addEventListener('webkitTransitionEnd', unhili)
	document.body.addEventListener('transitionend', unhili)
	}

	function unhili() {
	document.body.classList.remove(cls)
	}
	</script>
	</body>
	</html>