JavaScript를 사용하여 클릭을 시뮬레이션하는 방법
JavaScript를 사용하여 요소를 클릭하는 시뮬레이션 방법을 알고 싶습니다.
현재 가지고 있는 것은 다음과 같습니다.
function simulateClick(control) {
if (document.all) {
control.click();
} else {
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
control.dispatchEvent(evObj);
}
}
<a href="http://www.google.com" id="mytest1">test 1</a><br>
<script type="text/javascript">
simulateClick(document.getElementById('mytest1'));
</script>
근데 안 돼: (
좋은 생각 있어요?
다음과 같은 간단한 것은 어떻습니까?
document.getElementById('elementID').click();
IE에서도 지원.
[2022년 편집] 너무 구식이었어심플화 및 현대화.
원하는 유형의 새로 만든 제품과 함께 사용합니다.
다음은 이벤트 위임을 사용한 예입니다.
이 스택블리츠 프로젝트를 포크하여 가지고 놀아라.
// Note: {bubbles: true} because of the event delegation ...
document.addEventListener(`click`, handle);
document.addEventListener(`virtualhover`, handle);
// the actual 'trigger' function
const trigger = (el, etype, custom) => {
const evt = custom ?? new Event( etype, { bubbles: true } );
el.dispatchEvent( evt );
};
// a custom event ;)
const vHover = new CustomEvent(`virtualhover`,
{ bubbles: true, detail: `red` });
setTimeout( _ =>
trigger( document.querySelector(`#testMe`), `click` ), 1000 );
function handle(evt) {
if (evt.target.id === `clickTrigger`) {
trigger(document.querySelector(`#testMe`), `click`);
}
if (evt.type === `virtualhover`) {
evt.target.style.color = evt.detail;
return setTimeout( _ => evt.target.style.color = ``, 1000 );
}
if (evt.target.id === `testMe`) {
document.querySelector(`#testMeResult`)
.insertAdjacentHTML(`beforeend`, `<p>One of us clicked #testMe.
It was <i>${evt.isTrusted ? `<b>you</b>` : `me`}</i>.</p>`);
trigger(
document.querySelector(`#testMeResult p:last-child`),
`virtualhover`,
vHover );
}
}body {
font: 1.2rem/1.5rem verdana, arial;
margin: 2rem;
}
#testMe {
cursor: pointer;
}
p {
margin: 0.2rem 0;
}<div id="testMe">
Test me can be clicked
</div>
<p><button id='clickTrigger'>Click #testMe</button></p>
<div id="testMeResult"></div>오래된 답은 다음과 같습니다.
내가 요리한 거 여기 있어.매우 간단하지만 효과가 있습니다.
function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } }
모든 브라우저의 검출을 피하기 위해 jQuery를 사용하는 것을 고려해 본 적이 있습니까?jQuery를 사용하면 다음과 같이 간단합니다.
$("#mytest1").click();
var elem = document.getElementById('mytest1');
// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );
/**
* Trigger the specified event on the specified element.
* @param {Object} elem the target element.
* @param {String} event the type of the event (e.g. 'click').
*/
function triggerEvent( elem, event ) {
var clickEvent = new Event( event ); // Create the event.
elem.dispatchEvent( clickEvent ); // Dispatch the event.
}
언급
- https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
- https://codepen.io/felquis/pen/damDA
jQuery를 사용하면 많은 공간을 절약할 수 있습니다.다음 항목만 사용하면 됩니다.
$('#myElement').trigger("click")
제일 위에 정답이 최고예요!하지만 파이어폭스에서 마우스 이벤트를 트리거하지 않았습니다.etype = 'click'.
그래서 제가 바꿨어요.document.createEvent로.'MouseEvents'그래서 문제가 해결되었습니다.추가 코드는 이벤트에 다른 비트의 코드가 간섭하고 있는지 여부를 테스트하는 것으로, 취소되었을 경우 콘솔에 기록합니다.
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent(etype, true, false);
var canceled = !el.dispatchEvent(evObj);
if (canceled) {
// A handler called preventDefault.
console.log("automatic click canceled");
} else {
// None of the handlers called preventDefault.
}
}
}
이벤트 시뮬레이션은 사용자 지정 이벤트를 생성하는 것과 유사합니다.마우스 이벤트를 시뮬레이션하려면
- 우리가 만들어 내야 할 것은
MouseEvent사용.document.createEvent(). - 그 후,
initMouseEvent()발생할 마우스 이벤트를 설정해야 합니다. - 그런 다음 이벤트를 시뮬레이션할 요소에 마우스 이벤트를 디스패치했습니다.
다음 코드에서, 나는setTimeout1초 후에 버튼이 자동으로 클릭되도록 합니다.
const div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log('Simulated click');
});
const simulatedDivClick = document.createEvent('MouseEvents');
simulatedDivClick.initEvent(
'click', /* Event type */
true, /* bubbles */
true, /* cancelable */
document.defaultView, /* view */
0, /* detail */
0, /* screenx */
0, /* screeny */
0, /* clientx */
0, /* clienty */
false, /* ctrlKey */
false, /* altKey */
false, /* shiftKey */
0, /* metaKey */
null, /* button */
null /* relatedTarget */
);
// Automatically click after 1 second
setTimeout(function() {
div.dispatchEvent(simulatedDivClick);
}, 1000);<div> Automatically click </div>document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));
이 링크를 클릭하면 Javascript를 사용한 마우스 이벤트와 동일한 브라우저 호환성에 대해 알 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility
이벤트가 트리거되지 않는 경우 시간 초과 사용
setTimeout(function(){ document.getElementById('your_id').click(); }, 200);
이것은 잘 문서화되어 있지 않지만, 우리는 모든 종류의 이벤트를 매우 간단하게 트리거할 수 있습니다.
다음 예에서는 버튼을 50번 더블클릭합니다.
let theclick = new Event("dblclick")
for (let i = 0;i < 50;i++){
action.dispatchEvent(theclick)
}<button id="action" ondblclick="out.innerHTML+='Wtf '">TEST</button>
<div id="out"></div>이벤트 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.
이벤트는 마우스 버튼 클릭이나 키보드 탭 등의 사용자 액션에 의해 트리거되거나 API에 의해 생성되어 비동기 태스크의 진행 상황을 나타낼 수 있습니다.또한 요소의 HTMlement.click() 메서드를 호출하거나 이벤트를 정의한 후 EventTarget.dispatchEvent()를 사용하여 지정된 타깃으로 전송하는 등 프로그래밍 방식으로 트리거할 수도 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
document.getElementById("element").click()
DOM 에서 요소를 선택하기만 하면 됩니다.노드에는 클릭 기능이 있어 호출할 수 있습니다.
또는
document.querySelector("#element").click()
나에게 효과가 있었던 솔루션은…클릭 이벤트는 버튼을 클릭할 때 호출하거나 JavaScript 파일에서 실행할 수 있습니다.이 코드에서는 버튼을 클릭하여 경보를 표시하거나 특정 조건 또는 조건 없이 호출합니다.
function ss(){
alert('dddddddddddddddddddddddd');
}
var mybtn=document.getElementById('btn');
mybtn.click(); <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="btn" onclick="ss()">click to see </button>
</body>
</html>솔직히 여기 있는 어떤 대답도 제 특정 사건에 맞지 않았어요jquery는 불가능하기 때문에 모든 답은 검증되지 않았습니다.위의 @mnishiguchi 답변에서 이 답변을 작성했다고 말하겠습니다만, 실제로 효과가 있는 것은 이것뿐이었습니다.
// select the element by finding the id of mytest1
const el = document.querySelector('#mytest1');
// pass the element to the simulateClick function
simulateClick( el );
function simulateClick(element){
trigger( element, 'mousedown' );
trigger( element, 'click' );
trigger( element, 'mouseup' );
function trigger( elem, event ) {
elem.dispatchEvent( new MouseEvent( event ) );
}
}
const Discord = require("discord.js");
const superagent = require("superagent");
module.exports = {
name: "hug",
category: "action",
description: "hug a user!",
usage: "hug <user>",
run: async (client, message, args) => {
let hugUser = message.mentions.users.first()
if(!hugUser) return message.channel.send("You forgot to mention somebody.");
let hugEmbed2 = new Discord.MessageEmbed()
.setColor("#36393F")
.setDescription(`**${message.author.username}** hugged **himself**`)
.setImage("https://i.kym-cdn.com/photos/images/original/000/859/605/3e7.gif")
.setFooter(`© Yuki V5.3.1`, "https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png")
if (hugUser.id === message.author.id) return message.channel.send(hugEmbed2);
const {body} = await superagent
.get(`https://nekos.life/api/v2/img/hug`);
let hugEmbed = new Discord.MessageEmbed()
.setDescription(`**${message.author.username}** hugged **${message.mentions.users.first().username}**`)
.setImage(body.url)
.setColor("#36393F")
.setFooter(`© Yuki V5.3.1`, "https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png")
message.channel.send(hugEmbed)
}
}
언급URL : https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
'programing' 카테고리의 다른 글
| PHP에서 디렉토리와 그 콘텐츠(파일+서브디르) 전체를 반복적으로 삭제하려면 어떻게 해야 합니까? (0) | 2023.02.02 |
|---|---|
| ID가 예약어가 아니거나 공백이 있는 경우 BACKTICS를 사용해야 하는 이유는 무엇입니까? (0) | 2023.02.02 |
| Wikidata에서 데이터의 JSON 또는 RDF 일괄 Import는 어떻게 합니까? (0) | 2023.02.02 |
| MySQL 클라이언트가 내가 지정한 포트를 사용하지 않는 이유는 무엇입니까? (0) | 2023.02.02 |
| MySQL의 바이너리 데이터 (0) | 2023.02.02 |