div获得/失去焦点

div获得/失去焦点

---

div标签默认是没有焦点的，但是当出现以下类似问题时，就需要将div设置为可操作元素，从而使其获得焦点

    当出现如

1. 使用div/ul制作自定义下拉选
2. div中两个元素绑定一个事件时

    就需要为div设置属性使其变为可操作元素（以下使用第一种情况作为案例）

<div id="showPermission" hidden="hidden" style="display: none;">
<li>
	<a href="javascript:;">首页</a>
</li>
<li>
	<a href="javascript:;">管理员业务</a>
	<ul>
		<li>
			<a href="javascript:;">信息管理</a>
		</li>
	</ul>
</li>
</div>

    如上，为使用div + ul模拟的树形下拉选（已简化html），当需要未其添加失去焦点事件（blur）时，就需要对div添加属性。

 <div id="xxx" class="xxx" hidden="hidden" tabindex="0" contenteditable="true" ></div>

    对div添加tabindex即可使div触发onBlur事件，但是对div中a设定onClick事件时，就会触发onBlur，无法选中。需要继续添加contenteditable="true"使div可操作。

    遗留的问题：设置contenteditable="true"后导致div中内容可更改，目前暂未想到处理方法，如果各位大佬有方法，敬请留言，谢谢

— 以下为新思路 —

    对于【div中a设定onClick事件时，就会触发onBlur，无法选中】这个问题，是因为onBlur发生在onClick之前，因此只要让onClick中的内容先执行即可。
    出于这个考虑，我想到setTimeout方法，将onBlur中执行的内容置于setTimeout中，使其200ms后执行，则可以让onClick在onBlur中的代码执行前执行。（另外contenteditable="true"可以不使用了）

$('#showPermission').blur(function (obj) {
	//延时执行
	setTimeout(function () {
		$('#showPermission').hide();
	},200);

})

    PS:如果此思路仍有缺陷，请大佬们提出来并帮忙指点下更有效的方式。

---