為什么點(diǎn)擊文本框聚焦會(huì)彈出窗口？focus不是不冒泡么？求解~
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <style>
? ? ? ? .left div,
? ? ? ? .right div {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? margin: 5px;
? ? ? ? ? ? float: left;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? }
? ? ? ? .left div {
? ? ? ? ? ? background: #bbffaa;
? ? ? ? }
? ? ? ? .right div {
? ? ? ? ? ? background: yellow;
? ? ? ? }
? ? </style>
? ? <script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>自定義事件triggerHandler</h2>
<div class="left">
? ? <div id="accident">
? ? ? ? <a>triggerHandler事件</a>
? ? ? ? <input type="text">
? ? </div>
? ? <button>事件冒泡,觸發(fā)瀏覽器默認(rèn)聚焦行為</button><br><br>
? ? <button>不會(huì)冒泡，不觸發(fā)瀏覽器默認(rèn)聚焦行為</button>
</div>
<script type="text/javascript">
? ? //給input綁定一個(gè)聚焦事件
? ? $("input").on("focus",function(event,title) {
? ? ? ? $(this).val(title)
? ? });
? ? $("#accident").on("click",function() {
? ? ? ? alert("trigger觸發(fā)的事件會(huì)在 DOM 樹(shù)中向上冒泡");
? ? });
? ? //trigger觸發(fā)focus
? ? $("button:first").click(function() {
? ? ? ? $("a").trigger("click");
? ? ? ? $("input").trigger("focus");
? ? });
? ? //triggerHandler觸發(fā)focus
? ? $("button:last").click(function() {
? ? ? ? $("a").triggerHandler("click");
? ? ? ? $("input").triggerHandler("focus","沒(méi)有觸發(fā)默認(rèn)聚焦事件");
? ? });
</script>
</body>
</html>
2019-01-20
不是input元素上的focus冒泡，是通過(guò)trigger模擬觸發(fā)了a標(biāo)簽的點(diǎn)擊事件，點(diǎn)擊事件向上冒泡
?$("button:first").click(function() {
? ? ? ? $("a").trigger("click");//這兒會(huì)向上冒泡至父級(jí)元素，雖然a標(biāo)簽并沒(méi)有顯示綁定事件處理函數(shù)
? ? ? ? $("input").trigger("focus");
? ? });