ホームページ >ウェブフロントエンド >htmlチュートリアル >div がブラーをトリガーできない場合の解決策event_html/css_WEB-ITnose
div がブラーをトリガーできない場合の解決策event_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:571379ブラウズ
デフォルトでは、div はフォーカスを取得できず、フォーカスやブラーイベントをトリガーすることはできません。span、a およびその他のタグはフォーカスイベントをトリガーできないと想定されています (input:button および button タグはトリガーできます)
div トリガーの作り方ぼかしイベント: div に tabindex 属性を追加できます
オンラインデモ: http://sandbox.runjs.cn/show/e0bvfcag
ソースコード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: #3295F2; } </style> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script></head><body> <input type="text" /> <input type="button" value="测试" class="but"/> <button>kkk</button> <div class="box" tabindex="1"></div> <script> $('.box').focus(function(){ alert('div focus'); }); $('.box').blur(function(){ alert('div blur'); }); $('.but').focus(function(){ alert('but'); }); $('.but').blur(function(){ alert('but'); }); $('button').focus(function(){ alert('but'); }); $('button').blur(function(){ alert('but'); }); </script></body></html>
デモ: http://www.w3school.com.cn/tiy/t.asp?f=html_standard_tabindex
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。