Question

当检测到事件'keydown'时，也会自动触发事件'blur'。如果触发'keydown'事件，如何防止元素上的'blur'事件？这是jsFiddle和代码： HTML：

<div id="delegatee">
    <span id="ctrl" contenteditable="true"></span>
</div>

CSS：

#ctrl {
    width:100px;
    height:50x;
    border:1px solid black;
    display:inline-block;
}

JavaScript的：

function saveOrDelete() {
    $("#ctrl").attr('contentEditable', false);    
    alert('Triggered'); // alerts 2 times
}
$("#delegatee").on('keydown blur', '#ctrl', saveOrDelete)

请注意，此解决方案不起作用：

function saveOrDelete() {
    $("#delegatee").off('keydown blur', '#ctrl', saveOrDelete)
    $("#ctrl").attr('contentEditable', false);    
    alert('Trigger');
    $("#delegatee").on('keydown blur', '#ctrl', saveOrDelete)
}

Answer 1

此行导致此行为：

$("#ctrl").attr('contentEditable', false);

一旦跨度不再contentEditable，它就会失去焦点，因此blur会被提升。

你必须重新思考你的逻辑。

编辑（评论后）：

由于上述原因，为了捕获紧跟在blur之后的keydown，您可以更改逻辑以首先检查范围是否可编辑，然后根据该范围采取措施。< / p>

e.g。

var mode = $("#ctrl").prop('contentEditable');
if (mode == 'true') { 
    $("#ctrl").prop('contentEditable', false);
    // your other processes here
} else {
    return false;
}

检查小提琴上的更新： http://jsfiddle.net/CxFaq/1/

停止由于按键触发模糊事件

1 个答案: