Question

我正在尝试为鼠标点击元素创建一个功能。

让我们现在考虑$(element).click()这个问题的范围，我想用这种方式创建它：

function mouseClick() {
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });

    var element = document.getElementById('elementId');
    element.dispatchEvent(event);
}

mouseClick();

问题是：

当我尝试将元素作为参数传递给此函数时（作为jQuery对象），当我调用它时：

function mouseClick(element) {
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });

    //var element = document.getElementById('elementId'); <==== I want to remove this to replace it with the arguments when I call it;
    element.dispatchEvent(event);
}

var element = $('#elementId');
mouseClick(element);

我收到控制台错误：

未捕获的TypeError：element.dispatchEvent不是函数

但是当我使用getElementById选择元素时，它可以工作：

var element = $('#elementId'); //<==== this doesn't work;
var element = document.getElementById('elementId'); //<==== this works;
mouseClick(element);

为什么会这样？

我怎样才能使jQuery选择器工作？

基本上我想在ID选择器之外以更高级的方式选择元素，所以，我认为jQuery很方便，写得少。

Answer 1

jQuery对象与DOM元素不同，您通常无法在它们上调用相同的方法（在少数情况下，它们具有相同名称的相似方法，例如submit()形式）。 dispatchEvent()是一个DOM方法，而不是jQuery方法，所以你不能在jQuery对象上调用它。

您可以使用get()方法从jQuery对象获取DOM元素，因此您可以这样做：

mouseClick(element.get(0));

您还可以使用下标作为快捷方式：

mouseClick(element[0]);

Answer 2

jquery选择器的结果不是DOM元素，因此您无法在其上使用displayEvent。

您可以浏览jquery选择器中的所有元素，然后将事件发送给每个元素：

Object.keys(element).forEach(function(key) {
    element[key].dispatchEvent(event);
});

传递元素（作为jQuery对象）作为函数的参数

2 个答案: