Tôi làm cách nào để mô phỏng một nhấp chuột vào một thẻ liên kết?

Tôi muốn mô phỏng một nhấp chuột vào một thẻ liên kết với tất cả các tính năng bổ sung như xử lý mục tiêu chính xác.Tôi làm cách nào để mô phỏng một nhấp chuột vào một thẻ liên kết?

Dường như có một phương pháp "[click()] [3]" cho đối tượng DOM của neo nhưng không phải tất cả trình duyệt đều hỗ trợ điều đó. Firefox ném lỗi này:

Error: anchorObj.click is not a function

Nó cũng làm việc kỳ lạ trên Opera 10 và Konqueror, gây nhấp chuột vô hạn xảy ra khi nó được gọi là bên trong handler onclick của một div xung quanh. Tôi đoán chỉ IE8 hoạt động tốt với nó. Dù sao tôi không muốn nó kể từ khi trình duyệt chính chủ yếu là có vấn đề với nó.

tôi tìm thấy giải pháp này thay thế cho Firefox trên các diễn đàn Mozilla:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt);

Điều này có vẻ quá xấu xí và cồng kềnh đối với tôi. Tôi không biết nó tương thích như thế nào và tôi muốn tránh viết mã trình duyệt cụ thể càng nhiều càng tốt.

Tôi không thể sử dụng location.href = anchorObj.href; bởi vì nó không xử lý thuộc tính "target". Tôi có thể làm một số mã hóa cứng dựa trên giá trị của mục tiêu nhưng tôi cũng muốn tránh điều đó.

Có đề xuất chuyển sang JQuery nhưng tôi không chắc nó xử lý tốt thuộc tính mục tiêu như thế nào vì tôi chưa từng làm việc với nó trước đây.

Nguồn

2009-09-14 Sedat Kapanoglu

Bản sao có thể có của [JavaScript: Gọi sự kiện nhấp chuột của thẻ neo từ javascript] (http://stackoverflow.com/questions/980709/javascript-invoking-click-event-of-an-anchor-tag-from -javascript) –

Đây là một trường hợp thử nghiệm hoàn chỉnh mô phỏng sự kiện click, kêu gọi tất cả các bộ xử lý kèm theo (tuy nhiên họ đã được đính kèm), duy trì "target" thuộc tính ("srcElement" trong IE), bong bóng giống như một sự kiện bình thường sẽ, và giả lập recursion- của IE Phòng ngừa. Thử nghiệm trong FF 2, Chrome 2.0, (6) Opera 9.10 và dĩ nhiên IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
function fakeClick(event, anchorObj) { 
    if (anchorObj.click) { 
    anchorObj.click() 
    } else if(document.createEvent) { 
    if(event.target !== anchorObj) { 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 
      0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     var allowDefault = anchorObj.dispatchEvent(evt); 
     // you can check allowDefault for false to see if 
     // any handler called evt.preventDefault(). 
     // Firefox will *not* redirect to anchorObj.href 
     // for you. However every other browser will. 
    } 
    } 
} 
</script> 
</head> 
<body> 

<div onclick="alert('Container clicked')"> 
    <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link'))"> 
    Fake Click on Normal Link 
</button> 

<br /><br /> 

<div onclick="alert('Container clicked')"> 
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button> 

</body> 
</html>

Demo here.

Nó tránh đệ quy trong trình duyệt IE không bằng cách kiểm tra các đối tượng sự kiện được bắt đầu bấm mô phỏng, bằng cách kiểm tra thuộc tính target của sự kiện (trong đó remains unchanged during propagation).

Rõ ràng IE thực hiện việc này trong nội bộ đang giữ tham chiếu đến global event object. DOM cấp 2 xác định không có biến toàn cầu như vậy, vì vậy lý do đó giả lập phải vượt qua trong bản sao cục bộ của nó là event.

Nguồn

2009-09-14 14:37:00

Bản cập nhật: vì hiện tại initMouseEvent không được chấp nhận, hãy xem [https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent](https://developer.mozilla.org/ vi-US/docs/Web/API/MouseEvent/initMouseEvent) sử dụng các sự kiện tùy chỉnh thay vì [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events](https://developer. mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) – user2315552

tốt, bạn có thể rất nhanh chóng kiểm tra các văn nhấp chuột qua jQuery như vậy

$('#link-id').click();

Nếu bạn vẫn gặp vấn đề với nhấp chuột tôn trọng các mục tiêu, bạn luôn có thể làm điều này

$('#link-id').click(function(event, anchor) 
{ 
    window.open(anchor.href, anchor.target, ''); 
    event.preventDefault(); 
    return false; 
});

Nguồn

2009-09-14 14:04:22

Được trích dẫn từ https://developer.mozilla.org/en/DOM/element.click

The click method is intended to be used with INPUT elements of type button, checkbox, radio, reset or submit. Gecko does not implement the click method on other elements that might be expected to respond to mouse–clicks such as links (A elements), nor will it necessarily fire the click event of other elements.

Non–Gecko DOMs may behave differently.

Thật không may, có vẻ như bạn có dy phát hiện ra giải pháp tốt nhất cho vấn đề của bạn.

Là một lưu ý phụ, tôi đồng ý rằng giải pháp của bạn có vẻ ít hơn lý tưởng, nhưng nếu bạn đóng gói chức năng bên trong một phương thức (giống như JQuery sẽ làm) nó không quá tệ.

Nguồn

2009-09-14 14:05:38

Có một cách đơn giản để đạt được điều đó,

HTML

<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>

Javascript

// Simulating click after 3 seconds 
setTimeout(function(){ 
    document.getElementById('fooLinkID').click(); 
}, 3 * 1000);

Sử dụng javascript đơn giản để mô phỏng một nhấp chuột cùng với việc giải quyết tài sản mục tiêu .

Bạn có thể kiểm tra ví dụ làm việc tại đây trên jsFiddle.

Nguồn

2017-04-11 16:20:22

Tôi làm cách nào để mô phỏng một nhấp chuột vào một thẻ liên kết?

Trả lời

Các vấn đề liên quan