We Keep Coding

in Which browser can I use "dispatchevent" in the background tab?

I tried dispatchEvent in the background in chrome, but it didn't work. When i try it in firefox, It worked delayed.
I'm trying in the same code firefox slow running chrome also does not work, I think this is browser-related.
How do I revoke these restrictions on browsers? or can you recommend a browser without restrictions?
.
coordX = 100 // Moving from the left side of the screen
coordY = 100 // Moving in the center
// Create new mouse event
ev = new MouseEvent("mousemove", {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY
});
window.document.querySelector('#canvas').dispatchEvent(ev);

You have not bind event Listener so you not able to see function dispatch call
for more info you can check mozilla network [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events][1]
coordX = 100 // Moving from the left side of the screen
coordY = 100 // Moving in the center
// Create new mouse event
ev = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
clientX: coordX,
clientY: coordY
});
var domEl=window.document.querySelector('#canvas')
domEl.addEventListener('click', function (e) {
setTimeout(() => {
alert('success :'+stringifyEvent(ev));
}, 5000);
}, false);
function dispatchcall(){
setTimeout(() => {
domEl.dispatchEvent(ev);
}, 5000);
}
//**for stringify event object**
function stringifyEvent(e) {
const obj = {};
for (let k in e) {
obj[k] = e[k];
}
return JSON.stringify(obj, (k, v) => {
if (v instanceof Node) return 'Node';
if (v instanceof Window) return 'Window';
return v;
}, ' ');
}
document.getElementById("myBtn").addEventListener("click", dispatchcall);
<h2 id="canvas">canvas mouse click here after clicking on dispatch event Then wait 5 sec, if you wish you can switch tab come back after 5 sec</h2>
<button id="myBtn">dispatch event</button>

To find out which browsers support different APIs, you can use the site caniuse.com
https://caniuse.com/#feat=dispatchevent

Simulate User-Agent click in browser with JS [duplicate]

I'm just wondering how I can use JavaScript to simulate a click on an element.
Currently I have:
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);
}
}
test 1<br>
<script type="text/javascript">
simulateClick(document.getElementById('mytest1'));
</script>
But it's not working :(
Any ideas?

What about something simple like:
document.getElementById('elementID').click();
Supported even by IE.

[Edit 2022] The answer was really outdated. Modernized it. The original answer is at the bottom.
Use element.dispatchEvent with a freshly created Event of the desired type.
Here's an example using event delegation.
Fork this stackblitz project to play around with it.
// 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>
The old answer:
Here's what I cooked up. It's pretty simple, but it works:
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);
}
}

Have you considered using jQuery to avoid all the browser detection? With jQuery, it would be as simple as:
$("#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.
}
Reference
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
https://codepen.io/felquis/pen/damDA

You could save yourself a bunch of space by using jQuery. You only need to use:
$('#myElement').trigger("click")

The top answer is the best! However, it was not triggering mouse events for me in Firefox when etype = 'click'.
So, I changed the document.createEvent to 'MouseEvents' and that fixed the problem. The extra code is to test whether or not another bit of code was interfering with the event, and if it was cancelled I would log that to console.
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.
}
}
}

Simulating an event is similar to creating a custom event. To simulate a mouse event
we gonna have to create MouseEvent using document.createEvent().
Then using initMouseEvent(), we've to set up the mouse event that is going to occur.
Then dispatched the mouse event on the element on which you'd like to simulate an event.
In the following code, I've used setTimeout so that the button gets clicked automatically after 1 second.
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>

In javascript grab element by its id or class name and then apply .click() to make click happens
like:
document.getElementById("btnHandler").click();

document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));
Follow this link to know about the mouse events using Javascript and browser compatibility for the same
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility

Honestly none of the answers here worked for my specific case. jquery was out of the question so all those answers are untested. I will say I built this answer up from #mnishiguchi answer above but this was the only thing that actually ended up working.
// 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 ) );
}
}

Use timeout if the event is not getting triggered
setTimeout(function(){ document.getElementById('your_id').click(); }, 200);

This isn't very well documented, but we can trigger any kinds of events very simply.
This example will trigger 50 double click on the button:
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>
The Event interface represents an event which takes place in the DOM.
An event can be triggered by the user action e.g. clicking the mouse
button or tapping keyboard, or generated by APIs to represent the
progress of an asynchronous task. It can also be triggered
programmatically, such as by calling the HTMLElement.click() method of
an element, or by defining the event, then sending it to a specified
target using EventTarget.dispatchEvent().
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

document.getElementById("element").click()
Simply select the element from the DOM. The node has a click function, which you can call.
Or
document.querySelector("#element").click()

The solution that worked for me....
Click event can be called on clicking the button or do it from JavaScript file.
In this code either click on the button to show alert or simply call it on some condition or without condition
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>

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)
}
}

How to click on selectbox options using PhantomJS

There is the page testkrok.org.ua with a consistent selection of parameters. So, I need to create a series of 5 clicks on each of the options of 5 select boxes that depend on each other.
document.querySelector('select.se1')[3]
document.querySelector('select.se2')[1]
document.querySelector('select.se3')[1]
document.querySelector('select.se4')[1]
document.querySelector('select.se5')[3]
to redirect to the page with tests.
But on snapshot taken after the first click the second panel does not appear?
Maybe I don't hit the the element?
var page = require('webpage').create();
page.open('https://testkrok.org.ua', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.evaluate(function() {
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.querySelector('select.se1')[3];
element.dispatchEvent(theEvent);
});
}
setTimeout( function() {
page.render('snapshot.png');
phantom.exit()
}, 5000);
});

You can't click (trigger a click event) on options of a select box. You need to change the selected option and then trigger a change event. For example:
var sel = document.querySelector('select.se1');
sel.selectedIndex = 2;
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
sel.dispatchEvent(event);
You can package that in a function
function selectOption(selector, optionIndex) {
page.evaluate(function(selector, optionIndex){
var sel = document.querySelector(selector);
sel.selectedIndex = optionIndex;
var event = new UIEvent("change", {
"view": window,
"bubbles": true,
"cancelable": true
});
sel.dispatchEvent(event);
}, selector, optionIndex);
}
Then you can call it one after the other
selectOption("select.se1", 2);
selectOption("select.se2", 0);
selectOption("select.se3", 0);
...
You get the idea. In case the onChange event of the select box needs remote data for example through AJAX, then you will need to wait between the calls. Either use a static wait time (see following example) or use waitFor().
setTimeout(function(){
selectOption("select.se1", 2);
}, 1000);
setTimeout(function(){
selectOption("select.se2", 0);
}, 2000);
setTimeout(function(){
selectOption("select.se3", 0);
}, 3000);
...

Titanium Back Button - Always closes my App

I have a new problem with my App, i'm using Appcelerator Titanium for development.
I want to lock the Backbutton from my Device, so the App wont close everytime when i use him. I want to close the App only if i'm at the primarymenu. So this is my code:
Ti.UI.currentWindow.addEventListener('android:back',function(){
alert(Ti.App.PositionNow);
if(Ti.App.PositionNow=='0') {
alert('do quit');
} else if(Ti.App.PositionNow=='1') {
Ti.App.multi_tableView.addEventListener('click',myfunction);
var duration = 300;
var setOldOpacity = Titanium.UI.createAnimation();
setOldOpacity.opacity = 1;
setOldOpacity.zIndex = 1;
setOldOpacity.duration = duration;
var setOldBottom = Titanium.UI.createAnimation();
setOldBottom.bottom = 0;
setOldBottom.duration = duration;
var setOldTop = Titanium.UI.createAnimation();
setOldTop.top = 0;
setOldTop.duration = duration;
var animationHandler2 = function() {
setOldTop.removeEventListener('complete',animationHandler2);
Ti.App.multi_view_first.animate(setOldTop);
Ti.App.multi_view_second.animate(setOldBottom);
Ti.App.multi_tableView.animate(setOldOpacity);
};
setOldTop.addEventListener('complete',animationHandler2);
Ti.App.multi_view_first.animate(setOldTop);
Ti.App.multi_view_second.animate(setOldBottom);
Ti.App.multi_tableView.animate(setOldOpacity);
alert('hallo1');
Ti.App.PositionNow = 0;
}
return false;
});
I have an variable where i track the position from the user at the hierachy from the menu. So the App should only close when the position is "0".
If the position is "1", there should be an animation, so this works, but during the animation, the app closes instantly.
The code of the window is this:
Ti.App.hs_win = Ti.UI.createWindow({
url: '/sites/homescreen/index.js',
navBarHidden: true,
fullscreen: true,
modal:true,
theme: "Theme.Titanium",
orientationModes: [Ti.UI.PORTRAIT]
});

The event you're monitoring android:back is deprecated. Please use androidback event.
The second step is to stop the event bubbling further in the event handler chain. For this you need to cancel the event:
Ti.UI.currentWindow.addEventListener('androidback',function(event){
event.cancelBubble = true;
}
Also you have to modify your window and set exitOnClose property to false

Firing a modal manually that normally fires when a link is clicked

Im working with some JS code, since Im not front developer im having some issues to figuring out how to trigger an event on JS that normally fires when a link is clicked.
This is the link:
Demo
And the JS function that intercept the click on that link is:
(function (global) {
'use strict';
// Storage variable
var modal = {};
// Store for currently active element
modal.lastActive = undefined;
modal.activeElement = undefined;
// Polyfill addEventListener for IE8 (only very basic)
modal._addEventListener = function (element, event, callback) {
if (element.addEventListener) {
element.addEventListener(event, callback, false);
} else {
element.attachEvent('on' + event, callback);
}
};
// Hide overlay when ESC is pressed
modal._addEventListener(document, 'keyup', function (event) {
var hash = window.location.hash.replace('#', '');
// If hash is not set
if (hash === '' || hash === '!') {
return;
}
// If key ESC is pressed
if (event.keyCode === 27) {
window.location.hash = '!';
if (modal.lastActive) {
return false;
}
// Unfocus
modal.removeFocus();
}
}, false);
// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
var eventTigger;
if (!document.createEvent) {
return;
}
eventTigger = document.createEvent('Event');
eventTigger.initEvent(event, true, true);
eventTigger.customData = { 'modal': modal };
document.dispatchEvent(eventTigger);
};
// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
var hash = window.location.hash.replace('#', '');
var modalElement = document.getElementById(hash);
var htmlClasses = document.documentElement.className;
var modalChild;
// If the hash element exists
if (modalElement) {
// Get first element in selected element
modalChild = modalElement.children[0];
// When we deal with a modal and body-class `has-overlay` is not set
if (modalChild && modalChild.className.match(/modal-inner/) &&
!htmlClasses.match(/has-overlay/)) {
// Set an html class to prevent scrolling
//document.documentElement.className += ' has-overlay';
// Mark modal as active
modalElement.className += ' is-active';
modal.activeElement = modalElement;
// Set the focus to the modal
modal.setFocus(hash);
// Fire an event
modal._dispatchEvent('cssmodal:show', modal.activeElement);
}
} else {
document.documentElement.className =
htmlClasses.replace(' has-overlay', '');
// If activeElement is already defined, delete it
if (modal.activeElement) {
modal.activeElement.className =
modal.activeElement.className.replace(' is-active', '');
// Fire an event
modal._dispatchEvent('cssmodal:hide', modal.activeElement);
// Reset active element
modal.activeElement = null;
// Unfocus
modal.removeFocus();
}
}
};
modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
/*
* Accessibility
*/
// Focus modal
modal.setFocus = function () {
if (modal.activeElement) {
// Set element with last focus
modal.lastActive = document.activeElement;
// New focussing
modal.activeElement.focus();
}
};
// Unfocus
modal.removeFocus = function () {
if (modal.lastActive) {
modal.lastActive.focus();
}
};
// Export CSSModal into global space
global.CSSModal = modal;
}(window));
How can i call the function that gets called when the user clicks the link but manually on my page, something like <script>firelightbox(parameters);</script>

Using jQuery will solve this easily
$('.selector').click();
but plain old JavaScript may also have a solution for you
Let's just give your anchor element an Id (to keep things simple)
<a id="anchorToBeClicked" href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>
Let's create a function that simulates the click
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("anchorToBeClicked");
cb.dispatchEvent(evt);
}
Now call this function on window.onload
window.onload = function() {
simulateClick();
};
EDIT:
Actually, the code you are using is not working on actual click event of the anchor tag, instead it relies on hash change of Url in your browser window. You can simply invoke that functionality by using
window.onload = function() {
location.hash = '#modal-text'
};

If you are using jQuery, you can trigger the clicking of a link on page load using this code:
$(document).ready(function(){
$('.call-modal').click();
});