javascript - 尝试使用箭头语法重写它

Question

我以为我可以做到这一点:

$('body').on('focus', '[contenteditable]', e => {
        var self = $(e)
        self.data('before', self.html())
        return self
})

但它说:“无法读取未定义的属性‘createDocumentFragment’”

$('body').on('focus', '[contenteditable]', myfocus)

function myfocus() {
  var self = $(this)
  self.data('before', self.html())
  return self
}

p {
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable>Click here to edit</p>

Answer 1

你必须使用$(e.target);

在myfocus 函数中，this 是一个reference，指向DOM 元素 触发了 事件。

在 jquery 函数中，this 引用创建的 event，因此您可以使用 event.target 访问 DOM 元素。

event.target 属性返回触发事件的元素。

$('body').on('focus', '[contenteditable]', (e) => {
        var self = $(e.target);
        self.data('before', self.html())
        return self;
})

p {
cursor:pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable>Click here to edit</p>