Develop Reference

Automatically click also 2nd button when click 1st button

I have problem in the click buttons. What i need is to automatically clicked 2nd button when i click the 1st button.. I have created a sample code which is not working
HTML
<button id="button1" class="btn btn-success">1st button</button>
<a id="button2" class="btn btn-success" href="google.com">2nd button</a>
jQuery
jQuery(document).ready(function() {
jQuery('#button1').click(function () {
jQuery('#button2').click();
})
});
Here's my jdfiddle
https://jsfiddle.net/wj8pb9sf/

I've had this code snippet for quite some time and it has proven itself to be very valuable in these situations:
// Simulate event
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);
}
};
It doesn't rely on jQuery and allowes you to simulate a bunch of usefull events. Simply do: fireEvent(document.getElementById('button2'), 'click');.

$("#button1").click(function(){
$("#button2").click();
});
And also you can't give href in button.

Dblclick event handler not responding for apple devices

Currently my application uses a FancyTree jquery plugin, the dblclick event is not working only for apple devices, when running in google chrome developer mode set on iphone7/8 it gives me the following error in console:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
However when switch off device toolbar, it is working fine.
same as for android and windows devices.
Also installing chrome on apple device will not work.
What can be the problem?
Thank you.
Installing doubletap.js gives no result.
Code from event handler in plugin
.on("click" + ns + " dblclick" + ns, function(event) {
if (opts.disabled) {
return true;
}
var ctx,
et = FT.getEventTarget(event),
node = et.node,
tree = self.tree,
prevPhase = tree.phase;
// self.tree.debug("event(" + event.type + "): node: ", node);
if (!node) {
return true; // Allow bubbling of other events
}
ctx = tree._makeHookContext(node, event);
// self.tree.debug("event(" + event.type + "): node: ", node);
try {
tree.phase = "userEvent";
switch (event.type) {
case "click":
ctx.targetType = et.type;
if (node.isPagingNode()) {
return (
tree._triggerNodeEvent(
"clickPaging",
ctx,
event
) === true
);
}
return tree._triggerNodeEvent(
"click",
ctx,
event
) === false
? false
: tree._callHook("nodeClick", ctx);
case "dblclick":
ctx.targetType = et.type;
return tree._triggerNodeEvent(
"dblclick",
ctx,
event
) === false
? false
: tree._callHook("nodeDblclick", ctx);
}
} finally {
tree.phase = prevPhase;
}
});
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

This is a bit of an obscure issue in Chrome. It is caused by a change back in Chrome 56 which is intended to improve scroll performance on mobile.
The workaround is to add a CSS rule like this:
#modal_valve
{
touch-action: none;
}
You may need to add it to other elements as well, depending on which elements gets dragged.

Perform DoubleClick on element that have that

looks here:
that from One page that show me that element have event of doubleclick "dblclick"
but when i try to perform it from console:

dblclick is not a method, it is a type of event.
Let's say you have a button, and you wanted to manually fire that event. You could do so like this.
<button id='myButton'>Click Me!</button>
Now you can do this
var evt = new Event('dblclick');
var button = document.getElementById('myButton');
// This is where the magic happens
button.dispatchEvent(evt);
This manually fires the dblclick event.
You must call 'dispatchEvent' on a dom node, and it takes an 'Event' object.
For your use case, just replace the 'button' element with your own 'a' variable, and it should work as expected.

That answer works as well:
thank you both guys
noahnu and epascarello
var event; // The custom event that will be created
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent("dblclick", true, true);
} else {
event = document.createEventObject();
event.eventType = "dblclick";
}
event.eventName = "dblclick";
if (document.createEvent) {
element.dispatchEvent(event);
} else {
element.fireEvent("on" + event.eventType, event);
}

Disable arrow key scrolling in users browser

I'm making a game using canvas, and javascript.
When the page is longer than the screen (comments, etc.) pressing the down arrow scrolls the page down, and makes the game impossible to play.
What can I do to prevent the window from scrolling when the player just wants to move down?
I guess with Java games, and such, this is not a problem, as long as the user clicks on the game.
I tried the solution from: How to disable page scrolling in FF with arrow keys ,but I couldn't get it to work.

Summary
Simply prevent the default browser action:
window.addEventListener("keydown", function(e) {
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
}, false);
If you need to support Internet Explorer or other older browsers, use e.keyCode instead of e.code, but keep in mind that keyCode is deprecated and you need to use actual codes instead of strings:
// Deprecated code!
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
Original answer
I used the following function in my own game:
var keys = {};
window.addEventListener("keydown",
function(e){
keys[e.code] = true;
switch(e.code){
case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
case "Space": e.preventDefault(); break;
default: break; // do not block other keys
}
},
false);
window.addEventListener('keyup',
function(e){
keys[e.code] = false;
},
false);
The magic happens in e.preventDefault();. This will block the default action of the event, in this case moving the viewpoint of the browser.
If you don't need the current button states you can simply drop keys and just discard the default action on the arrow keys:
var arrow_keys_handler = function(e) {
switch(e.code){
case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
case "Space": e.preventDefault(); break;
default: break; // do not block other keys
}
};
window.addEventListener("keydown", arrow_keys_handler, false);
Note that this approach also enables you to remove the event handler later if you need to re-enable arrow key scrolling:
window.removeEventListener("keydown", arrow_keys_handler, false);
References
MDN: window.addEventListener
MDN: window.removeEventListener
MDN: KeyboardEvent.code interface

For maintainability, I would attach the "blocking" handler on the element itself (in your case, the canvas).
theCanvas.onkeydown = function (e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.view.event.preventDefault();
}
}
Why not simply do window.event.preventDefault()? MDN states:
window.event is a proprietary Microsoft Internet Explorer property
which is only available while a DOM event handler is being called. Its
value is the Event object currently being handled.
Further readings:
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

I've tried different ways of blocking scrolling when the arrow keys are pressed, both jQuery and native Javascript - they all work fine in Firefox, but don't work in recent versions of Chrome.
Even the explicit {passive: false} property for window.addEventListener, which is recommended as the only working solution, for example here.
In the end, after many tries, I found a way that works for me in both Firefox and Chrome:
window.addEventListener('keydown', (e) => {
if (e.target.localName != 'input') { // if you need to filter <input> elements
switch (e.keyCode) {
case 37: // left
case 39: // right
e.preventDefault();
break;
case 38: // up
case 40: // down
e.preventDefault();
break;
default:
break;
}
}
}, {
capture: true, // this disables arrow key scrolling in modern Chrome
passive: false // this is optional, my code works without it
});
Quote for EventTarget.addEventListener() from MDN
options Optional
   An options object specifies characteristics about the event listener. The available options are:
capture
   A Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
once
   ...
passive
   A Boolean that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. ...

This is the accepted answer rewritten for React.
import { useEffect } from "react";
const usePreventKeyboardScrolling = () => {
const onKeyDown = (e) => {
if (
["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
e.code
) > -1
) {
e.preventDefault();
}
};
useEffect(() => {
window.addEventListener("keydown", onKeyDown, false);
return () => window.removeEventListener("keydown", onKeyDown);
});
};
export { usePreventKeyboardScrolling };

jquery ui autocomplete - key events

I'd like to modify the enter key to fire off a window.open(ui.item.url)
Could someone help me do this? The autocomplete key code block is here:
.bind( "keydown.autocomplete", function( event ) {
if ( self.options.disabled ) {
return;
}
var keyCode = $.ui.keyCode;
switch( event.keyCode ) {
case keyCode.PAGE_UP:
self._move( "previousPage", event );
break;
case keyCode.PAGE_DOWN:
self._move( "nextPage", event );
break;
case keyCode.UP:
self._move( "previous", event );
// prevent moving cursor to beginning of text field in some browsers
event.preventDefault();
break;
case keyCode.DOWN:
self._move( "next", event );
// prevent moving cursor to end of text field in some browsers
event.preventDefault();
break;
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
// when menu is open or has focus
if ( self.menu.element.is( ":visible" ) ) {
event.preventDefault();
}
//passthrough - ENTER and TAB both select the current element
case keyCode.TAB:
if ( !self.menu.active ) {
return;
}
self.menu.select( event );
break;
case keyCode.ESCAPE:
self.element.val( self.term );
self.close( event );
break;
default:
// keypress is triggered before the input value is changed
clearTimeout( self.searching );
self.searching = setTimeout(function() {
// only search if the value has changed
if ( self.term != self.element.val() ) {
self.selectedItem = null;
self.search( null, event );
}
}, self.options.delay );
break;
}
})

I added a if block to the success method so that if the keypress == 13 I just open a new window with the url and return

I assume you're experiencing trouble with popup-blockers.
If that's the case, then you should know that browsers will block popups that weren't triggered directly by a user-interaction. Usually this means a mouse-click is required, although I'm not entirely certain whether an enter-key trigger will be blocked. You may want to open the window and then change the location of the window after the window is loaded.
var newWin = window.open(null, 'name');
newWin.onload = function(e)
{
newWind.location = url;
}
you may need to set up an onReadyStateChange event for IE instead of the onload event.
jQuery has some issues when working in the context of a different window, so be certain to check what window reference you're using, else your global vars might disappear.