ambar · July 10, 2012 09:48
diff --git a/clickable.html b/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>