Làm cách nào để kích hoạt nhấp chuột vào sự kiện JavaScript

Tôi có một siêu liên kết trong trang của tôi. Tôi đang cố gắng tự động hóa một số lần nhấp vào siêu liên kết cho mục đích thử nghiệm. Có cách nào bạn có thể mô phỏng 50 lần nhấp vào siêu liên kết bằng JavaScript không?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Tôi đang tìm kiếm trình kích hoạt sự kiện onClick từ JavaScript.

Thực hiện một cú nhấp chuột vào một phần tử HTML: Đơn giản chỉ cần làm element.click(). Hầu hết các trình duyệt chính đều hỗ trợ điều này .

Để lặp lại nhấp nhiều lần: Thêm ID vào thành phần để chọn duy nhất:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

và gọi .click()phương thức trong mã JavaScript của bạn thông qua vòng lặp for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

CẬP NHẬT

Đây là một câu trả lời cũ. Ngày nay bạn chỉ nên sử dụng nhấp chuột . Để bắn sự kiện nâng cao hơn, hãy sử dụng ClarkEvent .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Câu trả lời gốc

Đây là những gì tôi sử dụng: http://jsfiddle.net/mendesjuan/rHMCy/4/

Đã cập nhật để hoạt động với IE9 +

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Lưu ý rằng gọi fireEvent(inputField, 'change');không có nghĩa là nó thực sự sẽ thay đổi trường đầu vào. Trường hợp sử dụng điển hình để thực hiện một sự kiện thay đổi là khi bạn đặt trường theo chương trình và bạn muốn trình xử lý sự kiện được gọi kể từ khi gọi input.value="Something"sẽ không kích hoạt sự kiện thay đổi.

Gì

 l.onclick();

không chính xác gọi onclickchức năng của l, nghĩa là, nếu bạn đã thiết lập một với l.onclick = myFunction;. Nếu bạn chưa thiết lập l.onclick, nó không làm gì cả. Ngược lại,

 l.click();

mô phỏng một lần nhấp và kích hoạt tất cả các trình xử lý sự kiện, cho dù được thêm bằng l.addEventHandler('click', myFunction);, trong HTML hoặc theo bất kỳ cách nào khác.

Tôi khá xấu hổ vì có rất nhiều khả năng áp dụng một phần không chính xác hoặc không được tiết lộ.

Cách dễ nhất để làm điều này là thông qua Chrome hoặc Opera (ví dụ của tôi sẽ sử dụng Chrome) bằng Bảng điều khiển. Nhập mã sau vào bàn điều khiển (thường trong 1 dòng):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Điều này sẽ tạo ra kết quả cần thiết

.click()không hoạt động với Android (xem tài liệu mozilla , ở phần di động). Bạn có thể kích hoạt sự kiện nhấp bằng phương pháp này:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

Từ bài này

Sử dụng khung kiểm tra

Điều này có thể hữu ích - http://seleniumhq.org/ - Selenium là một hệ thống kiểm tra tự động ứng dụng web.

Bạn có thể tạo các bài kiểm tra bằng cách sử dụng plugin Selenium IDE của Firefox

Hướng dẫn bắn các sự kiện

Để sự kiện cháy bằng tay một cách chính xác, bạn sẽ cần phải sử dụng phương pháp khác nhau cho các trình duyệt khác nhau - một trong hai el.dispatchEventhoặc el.fireEventnơi elsẽ tố Neo của bạn. Tôi tin rằng cả hai điều này sẽ yêu cầu xây dựng một đối tượng Sự kiện để truyền vào.

Cách khác, không hoàn toàn chính xác, nhanh và bẩn sẽ là:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.

IE9 +

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Ví dụ sử dụng:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Nguồn: https://plainjs.com/javascript/events/trigger-an-event-11/

Cảnh báo đúng:

element.onclick()không hành xử như mong đợi. Nó chỉ chạy mã bên trong onclick="" attribute, nhưng không kích hoạt hành vi mặc định.

Tôi gặp vấn đề tương tự với nút radio không cài đặt thành kiểm tra, mặc dù onclickchức năng tùy chỉnh đang chạy tốt. Phải thêm radio.checked = "true";để thiết lập nó. Có lẽ điều tương tự cũng xảy ra và đối với các yếu tố khác (sau a.onclick()đó cũng nên có window.location.href = "url";)

Vui lòng gọi chức năng kích hoạt bất kỳ nơi nào và nút sẽ nhấp.

<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}