1

当检测到事件'keydown'时，也会自动触发事件'blur'。如果触发了“keydown”事件，如何防止元素上的“模糊”事件？这是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)
}
4

1 回答 1

2

此行导致此行为：

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

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

你将不得不重新思考你的逻辑。

编辑（在您发表评论后）：

由于上述原因，为了捕获blur紧跟在 a 之后的 which keydown，您可以更改您的逻辑以首先检查 span 是否可编辑，然后基于此采取措施。

例如

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

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

于 2013-10-25T07:34:27.197 回答