在可信的元素上聚焦/模糊事件

Question

我正在尝试span使用contenteditable=true属性收听焦点/模糊事件.

所以这就是我尝试过的(jQuery):

$('.editable').on('focus',function(){
    var that = $(this),
        defaultTxt = that.data('default');
    that.html('');
});
$('.editable').on('blur',function(){
    var that = $(this),
        defaultTxt = that.data('default');
    if(that.html() === ''){
        that.html(defaultTxt);
    }
});

但他似乎没有工作,因为span不能处理焦点/模糊.我怎么能实现这一点(需要IE8支持)？

Answer 1

有两种方法可以达到这种效果.

方法1:focusin和focusout(几乎跨浏览器)

$('.editable').on('focusin', function() {
    // your code here
});

$('.editable').on('focusout', function() {
    // your code here
});

focusin并且focusout就像focus和blur事件一样,但与后者不同的是,它们几乎(？)每个元素被触发,并且还会出现泡沫.focusin并且focusout是DOM级别3规范的一部分,由于已知的bug [1]它们不受Firefox支持

方法2:click和focus(hacky,但完全跨浏览器)

这仅适用focus于您的跨度周围有其他可用元素.你所做的基本上是将focus任何其他元素上的事件用作模糊处理程序.

$('.editable').on('click', function() {
    // your code here
});

$('*').on('focus', function() {
    // handle blur here
    // your code here
});

我不建议在大型webapp中使用此方法,因为浏览器性能会受到影响.