尝试使用箭头语法重写它

Question

我认为我可以做到这一点：

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

但是它说："Cannot read property 'createDocumentFragment' of undefined"

$('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是一个引用，它引用了DOM element 触发了 event。

在jquery函数中，this指的是创建的event，所以可以使用event.target.[=24访问DOM元素=]

event.target 属性 returns 触发 event.

的元素

$('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>

Trying to rewrite this using arrow syntax