模糊不会在p标签上启动



我试图在td,p上使用blur,但没有成功。jQuery文档说

"最初,此事件仅适用于表单元素,例如输入在最近的浏览器中,事件的域已经扩展以包括所有元素类型"

所以它应该在p/td标签上启动。这是我的示例代码:

<p>Test 2
</p>
<p>Test 1
</p>
<script>
    $(document).ready(function () {
        $("p").blur(function () {
            alert('blur');
        });
        
    });
</script>

但是,请注意,如果我尝试用程序调用blur,它就会被触发。

$("p").blur();

我假设当我点击第一个p,然后点击其他任何地方时,模糊应该会触发。。。我是不是遗漏了什么?

模糊是焦点事件的相反事件。p标记不能被聚焦,除非它有一个tabindex集,这样你的p标记就不会模糊。

tabindex属性添加到您的p标签,在选项卡或单击后将触发模糊,例如

<p tabindex="10">test 1</p>
<p tabindex="11">test 2</p>

focusout事件:http://jsfiddle.net/b98Bs/

模糊事件:http://jsfiddle.net/b98Bs/1/

(如果你点击p,记得点击后远离它以触发事件)

更新:

我已经包含了第二个jsfiddle来显示模糊,以及focusout,事件也会触发一个警报,显示正在失去焦点的p元素的文本。

如果您希望tabindex遵循文档中元素的顺序,请将它们都设置为tabindex="0":http://jsfiddle.net/b98Bs/2/

模糊事件不适用于像p这样的元素。它通常用于输入文本。如果你聚焦,你可以触发事件"聚焦",当焦点不在时,它就是模糊事件。您可以在那里使用模糊事件。模糊事件表示失去焦点。

在下面的例子中,当焦点不在时,输入文本的颜色变为红色。当焦点聚焦时,颜色变为黄色。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
$("#blurr").blur(function(){
  $(this).css("color","yellow");
}); 
$("#blurr").focus(function(){
    $("#blurr").css("color","red");
  });   
});
</script>
</head>
<body>
<input type="text" id="blurr" value="click Here"/>
</body>
</html>

最新更新