上一篇博文，介紹了實現思路，使用var元素來解決問題。
但總覺得很奇怪，用短語元素var去包含div流元素，這本身就是不正確的用法，所以一直在思考能否有更好的解決途徑。
簡單的把問題抽象出來，寫了一個Demo，代碼如下，很簡單。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Button</title>
<style>
.select-box {
overflow: visible;
/*border: none;*/
background: none;
position: relative;
height: 20px;
width: 200px;
border: 1px solid #111333;
}
.select-area {
width: 100%;
height: 40px;
position: absolute;
top: 20px;
border: 1px solid #0000FF;
}
.div1, .div2, .div3, .div4 {
width: 220px;
height: 400px;
border: 1px solid #99DB76;
float: left;
margin: 0 10px;
}
var {
display: block;
font-style: normal;
}
</style>
</head>
<body>
<p>結論：最終選用section實現，替換原有的var元素，更貼合語義環境。</p>
<div class="div1">
<p>div div</p>
<div class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
<div class="select-area" onclick="divclick()">
PPPPPP
</div>
</div>
</div>
<div class="div2">
<p>var var</p>
<var class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
<var class="select-area" onclick="divclick()">
PPPPPP
</var>
<var>
</div>
<div class="div3">
<p>button div</p>
<button class="select-box" onclick="bclick()" onblur="bblur()">
<div class="select-area" onclick="divclick()">
PPPPPP
</div>
</button>
</div>
<div class="div4">
<p>section section</p>
<section class="select-box" tabindex="0" onclick="bclick()" onblur="bblur()">
<section class="select-area" onclick="divclick()">
PPPPPP
</section>
<section>
</div>
<script>
function bclick() {
console.log('parent click.');
}
function divclick() {
console.log('child click.');
}
function bblur() {
console.log('blurbbbbbblur');
}
</script>
</body>
</html>
可以試一下代碼，剛試了一下jsfiddle，很好用。鏈接 https://jsfiddle.net/yjzb39re/
section元素和div一樣都是流元素，同樣僅有display:block的樣式設置，太符合我們的目的了。
總結：理解H5的內容，不夠深入，使用的機會很多，侷限於自己的思維模式，所以要多嘗試新內容，處理問題，解決問題。