首页 文章

单击div时防止触发焦点事件

提问于
浏览 次
39

这个问题类似于我之前的问题，Click action on Focused DIV，但这一次的主题是，如何防止当我点击其中一个div时触发焦点事件 . 上次我使用tabindex = '-1'时有一个div可以使其专注于点击，现在我有一个tabindex> 0的div列表，这样他们也可以在标签时获得焦点 .

<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>

一些造型：

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

现在我在第二次点击div时使用一个标志（动作）来触发一个动作（警报），如果它已经聚焦，只需点击一下，例如TAB .

var action = false;
$('div')
    .click(function(e){
        e.stopImmediatePropagation();
        if(action){alert('action');}
        action = true;})
    .focus(function(){action = true;})
    .blur(function(){action = false;});

上面代码的问题是焦点事件被触发，这意味着stopImmediatePropagation不能按照我预期的方式工作 . 两个单击操作可以对焦点事件行进行注释，但是当div获得焦点在TAB上时仍然需要双击 . 这是一个例子：http://jsfiddle.net/3MTQK/1/

javascript jquery javascript-events

3 回答

  • 77

    DEMO 这里

    我觉得你在这里错过了一些部分，

    • event.stopPropagation() 用于阻止事件冒泡 . 你可以阅读它here .

    • event.stopImmediatePropagation() 除了保持元素上的任何其他处理程序不被执行外，此方法还通过隐式调用 event.stopPropagation() 来停止冒泡 . 你可以读一下它here

    • 如果要停止浏览器事件，则应使用 event.preventDefault() . 你可以读一下它here

    • click = mousedown + mouseup - >当鼠标按下成功时，将在HTML元素上设置焦点 . 因此，您应该使用'mousedown'而不是绑定 click 事件 . 看我的演示 .

    • 您不能使用1个动作布尔值来确定单击了哪个div以及单击了多少次 . 检查我的演示，看看你如何处理它 .

    回复于
  • 11

    要在单击div时简单地防止触发焦点，请使用 mousedown + event.preventDefault() . 使用mousedown而不是单击，因为，正如@Selvakumar Arumugam解释的那样，当mousedown成功并且event.preventDefault（）将停止浏览器事件（包括我们的焦点）时，焦点会激活 .

    这是一个代码示例：

    $('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});
    回复于
  • 0

    目前明显的答案是将您的选择器从简单的“div”限制为切换类名称系统，从而可以控制焦点事件将触发的元素 . 它更繁琐，需要更多的异常编码，但可以完成这项工作 .

    回复于

相关问题