Question

我有以下代码：

$('body').on('mouseenter', 'label', function(){
        if(this.offsetWidth < this.scrollWidth){
            if(!this.getAttribute('title')) {
                this.setAttribute('title', this.innerHTML);
            }
        }
        else{
            this.removeAttribute('title');
        }
    });

但在我的项目中，我们需要减少与jquery的依赖关系。所以我需要重写（'mouseenter'）方法。我试过这样的事情：

var matches;

    (function (doc) {
        matches =
                doc.matchesSelector ||
                doc.webkitMatchesSelector ||
                doc.mozMatchesSelector ||
                doc.oMatchesSelector ||
                doc.msMatchesSelector;
    })(document.documentElement);

    document.addEventListener('mouseenter', function (e) {
        if (matches.call(e.target, 'label')) {
            if (this.offsetWidth < this.scrollWidth) {
                if (!this.getAttribute('title')) {
                    this.setAttribute('title', this.innerHTML);
                }
            }
            else {
                this.removeAttribute('title');
            }
        }
    }, false);

但是它不起作用，导致它只触发一次（在文档上的mouseenter）。我无法使用标签标签获取所有元素并向其添加事件侦听器，因为我在应用程序的不同部分中有许多标签。这有可能完全等同于jquery函数吗？

Answer 1

您可以改为使用mouseover并更改事件回调中的第一行，因此可以省略var matches：

document.addEventListener('mouseover', function (e) {
    if (e.target.tagName.toLowerCase() == 'label') {

    /* rest of your code */

}, false);

如何将jquery.on（＆＃39; mouseenter＆＃39;）转换为原生javascript？

1 个答案: