在Chrome和Firefox上，点击带有tabindex的父div使其子div获取焦点的操作能正常工作，但在IE中遇到问题。经过一天的尝试，包括使用JS、focus()方法、阻止冒泡等，最终在StackOverflow找到解决方案。问题在于IE对某些常规标签的处理方式，例如div和span。将这些标签替换为自定义标签（如'foo'或'var'），可以解决IE下的焦点问题。在Vue.js环境中，可以使用自定义标签或自定义组件来实现相同效果。
原始需求：父div上面有tabindex="0"，点击子div，子div获取焦点，这个时候，希望父div也获取焦点。
这个在Chrome，FF浏览器上均表现正常，唯独IE环境不好用，困扰了许久，花费大约一天时间，尝试过各种办法，比如JS脚本，focus()方法，阻止冒泡事件，增加div蒙层，嵌套层级等等，都不能解决，也不是最理想的办法。最后还是stackoverflow上搞定问题。
Demo在这里链接。
样例代码如下：
IE浏览器下的代码行为特别怪异，让人费解，不知道是不是bug，但感觉不像，总之你可以在你的浏览器环境试验下，唯独IE不管用。
解决的办法：
通过事件机制或者js脚本或引起许多问题，尝试使用默认表情比如"div","span"在IE环境下就会出现这个状况，但换成自定义的标签，比如自定义“foo”或者像"var"这样，IE就能够表象的很正常。还是看代码，在这里。
附上问题记录：在这里。
=====================================================================
结合项目环境，vuejs
有两种办法可以实现：
1.使用var标签，比较简便。如果考虑H5标签的语义化，容易混淆，最好写上注释。
2.自定义标签，其实就是自定义组件foo，只不过组件里面仅设置样式display:block，然后用foo替换div即可。
=====================================================================
更新：后续内容，新的结论在这里
前端新手，经验欠缺，如您有幸路过此地，还请多多指教。
随意转载请注明出处及作者sotower
http://blog.youkuaiyun.com/sotower/article/details/69396530
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
