Develop Reference

Firing button programatically doesn't do the same action as when clicking it manually

I am developing a Chrome extension that should help my team overcome an issue in some website.
The functionality is to 'programatically' click a specific website button when keyboard 'enter' button is clicked.
This is my extension code:
document.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
var btn = document.getElementsByClassName("standard")[0].getElementsByClassName("actions")[1].children[1].children[0];
btn.click();
}
});
However, no matter what I do, the website action followed my 'code click' isn't the same as when actually pressing the button itself (it has some by-products)..
Since I'm not an expert in JS, I was wondering whether there is another code snippet that is triggered when actually clicking the button via mouse, or something like that.
I also tried some code that actually simulates a mouse click on the button itself, but it also had the exact same behaviour:
function clickLink(link) {
var cancelled = false;
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0,
false, false, false, false,
0, null);
cancelled = !link.dispatchEvent(event);
}
else if (link.fireEvent) {
cancelled = !link.fireEvent("onclick");
}
}
I'd highly appreciate any ideas on how can I trigger the button exactly as it's triggered when it's truly clicked in the native website.
Thanks!

btn.click() should work, assuming you got a button element. Otherwise, this works:
document.addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
var btn = document.getElementsByClassName("standard")[0].getElementsByClassName("actions")[1].children[1].children[0];
var e = new MouseEvent('click', {view: window,bubbles: true,cancelable: true});
btn.dispatchEvent(e);
}
})
Check this out

How to disable mouse middle button click to open in a new tab or new window

I am trying to disable right and middle button of mouse so that it cant open new window or tab when click on any menu or hyperlink. Below javascript code works fine for right button but not working for middle button. Middle button of mouse gets captured but still new window or tab opens when click on hyperlink or menu.
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
return false;
};
}
else {
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
if (e.which == 3) {
alert("Sorry..... Right click Is Disabled!!!!");
return false;
}
if(e.which===2)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
else if(e.button===4)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
}
};
}
Its not woking for firefox, chrome and IE.

try
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
}

According to MDN the auxclick event handles the "open link in new tab with middle mouse button" behaviour.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

How to stop the mousemove event on clicking outside the window

on clicking the outside the window the mousemove event has to be stopped`,i have detected the click outside the window on mouseleave,but how to prevent the default even?in Javascript
onTextContainerMouseLeave: function (e) {
if (this.curDown == true) {
var value;
$(window).on('mouseup', function (e) {
this.curDown = false;
e.preventDefault();
e.stopPropagation();
return false;
});
}
},

Put a condition inside your on-click that is true if the mouse was inside the control (which you already have according to what is written). If the condition is true then go on with the on-click events. Otherwise nothing happens.
$(window).on('mouseup', function (e) {
if (yourconditionhere) {
//Execute your code here --
}
});

How to de-select a button using JavaScript

I have a button that a user is supposed to click to upload files:
window.URL = window.URL || window.webkitURL;
var button = document.getElementById("button"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault();
}, false);
function handleFiles(files) {
if (!files.length) {
fileList.innerHTML = "<p>No files selected!</p>";
} else {
fileList.innerHTML = "";
for (var i = 0; i < files.length; i++) {
var videoFile = document.createElement("video");
videoFile.setAttribute("id", "recording");
videoFile.src = window.URL.createObjectURL(files[i]);
videoFile.height = 240;
videoFile.width = 320;
videoFile.setAttribute("controls", true);
videoFile.onload = function() {
window.URL.revokeObjectURL(this.src);
}
fileList.appendChild(videoFile);
}
}
}
Then the user is supposed to use the space bar to pause/play a video. My problem is after the user clicks the button, the button stays clicked so when he or she pushes the space bar, the button is liked again. To solve this problem, the user would have to click somewhere else on the screen (except for the button) and then the space bar will work to pause/play the video. But I do not want the user to click somewhere else. So I tried to click a span element using JS but it did not work:
document.getElementById("spanElement").click();
This click is supposed to simulate the click the user would on the screen, but it doesn't work because when the spacebar is pressed, the button is clicked.
Any suggestions to solve this?
Thank you

Using HTMLElement.blur() should have the desired effect.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault();
e.target.blur();
}, false);
This will remove focus from the element once clicked.

That happen because after the click on the button it still focused, so to solve that behavior you could use .blur() in the end of click event.
The blur() method is used to removes keyboard focus from the current element.
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.target.blur(); //Remove focus after click
e.preventDefault();
}, false);
Hope this helps.

You could also add css to the button - pointer events
to disable button: $("#buttonId").css("pointer-events", "none");
to reactivate button: $("#buttonId").css("pointer-events", "auto");

jQuery - sometimes button clicks are not handled (trapped) on event handler

In my jQuery based code I use a button click event handler.
The problem described on title here occurs sometimes - approximately after 20 successfull clicks on the button. When it occurs, then I have to move mouse pointer out of the button area and move it again back over the button in order click event to be handled.
What could cause this strange behaviour?
Here is the event handler:
function advice() {
rebuildCacheBtnElem.bind("click", function (event) {
event.stopImmediatePropagation();
event.preventDefault();
switch (configBtnAction) {
case CONFIG_ACTION_REBUILD:
rebuildCacheBtnElem.text("Cancel");
configState = CONFIG_STATE_BUSY;
goNextConfigStep(configPages, configBtnAction, CONFIG_ACTION_FINISH);
worker(0, 0);
break;
case CONFIG_ACTION_FINISH:
if (configState == CONFIG_STATE_FINISHED_SUCCESS) {
treeId.populateTree();
}
else if (configState == CONFIG_STATE_BUSY) {
sendCommand({ cancel: cancelGUID }, function (data) {
resetGUI();
});
}
else {
resetGUI();
}
break;
}
window.console.log(configBtnAction);
});
}