We Keep Coding

How to make one NOT be able to simulate a click

I've noticed while working for someone on a script that this special button ( the login one ): https://www.easports.com/fifa/ultimate-team/web-app/ does not allow to simulate a click on it in any possible way.
I'm extremely curious to know how they do it.
I've tried
var btn=$('#Login > div > div > button.btn-standard.call-to-action');
btn.click(); // or trigger('click');
// or
click = new Event(click);
btn.dispatchEvent(click);
// or
btn.trigger('mousedown');
// oh and also:
function click(x, y)
{
var ev = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
var el = document.elementFromPoint(x, y);
el.dispatchEvent(ev);
}
I've even tried mouseenter, followed by mousedown and mouseup;
How can one achieve this sort of feature?

Here's an example of what they might be doing. Event.isTrusted gives you information on if it was a user action or a created event. They probably have some logic around this:
From the docs:
The isTrusted read-only property of the Event interface is a Boolean
that is true when the event was generated by a user action, and false
when the event was created or modified by a script or dispatched via
EventTarget.dispatchEvent().
document.getElementById('btn').addEventListener('click', (e) => console.log(e.isTrusted));
// Simulate a click onload (should print false to the console)
document.getElementById('btn').click(); // false
// TODO: Click the Button manually, you should see 'true' being printed
<button id="btn">Button</button>
My guess is that if you look into their source code, you'd see something similar where they are just doing an .stopPropogation or .preventDefault if isTrusted is false.
So they are probably doing this:
document.getElementById('btn1').addEventListener('click', (e) => {
if (!e.isTrusted) { e.preventDefault(); return;}
console.log('Button clicked!');
});
document.getElementById('btn1').click(); // nothing printed to console.
<button id="btn1">Button</button>

jQuery .closest on $(event.target) disables other click events

I have a jQuery plugin project, actually if it helps it's in github and you can see the full code at https://github.com/jondmiles/bootstrap-datepaginator/tree/1.2.0.
So I have an click event handler, one of the first things it does is use jQuery .closest to look up the DOM and find the parent anchor tag that the user has clicked. This is necessary as icons sit in front of some anchors and I want consistency in the element I'm handling.
Here's the code in question, line 273 of /src/bootstrap-datepaginator.js in the project if you want it in context.
_clickedHandler: function (event) {
event.preventDefault();
var target = $(event.target).closest('a');
var classList = target.attr('class') ? target.attr('class').split(' ') : [];
if (classList.indexOf('dp-no-select') !== -1) {
// do nothing
}
else if (classList.indexOf('dp-nav-left') !== -1) {
this._navBack();
}
else if (classList.indexOf('dp-nav-right') !== -1) {
this._navForward();
}
else if (classList.indexOf('dp-item') !== -1) {
this._select(target.attr('data-moment'));
}
},
Now I also have a datepicker (https://github.com/eternicode/bootstrap-datepicker) which is attached to an icon element, added during the rendering process.
It looks like this, line 476 in the project
if (this.$calendar) {
this.$calendar
.datepicker({
autoclose: true,
forceParse: true,
startView: 0,
minView: 0,
todayHighlight: true,
startDate: this.options.startDate.date.toDate(),
endDate: this.options.endDate.date.toDate()
})
.datepicker('update', this.options.selectedDate.date.toDate())
.on('changeDate', $.proxy(this._calendarSelect, this));
}
When the user clicks on the calendar icon the datepicker should appear. It used to, up until a recent change but now nothing happens; no calendar.
I've tracked the issue down to the addition of the .closest() method which was a recent addition. So it appears calling the .closest() on the event target some how suppresses the datepicker, but I can't figure out why, or how to work around this.
So to recap, when it worked line 275 looked like this
var target = $(event.target);
Now it doesn't work, line 275 looks like this
var target = $(event.target).closest('a');
Any ideas?

Programmatically click on a non-button element using javascript?

How to programmatically click on a non-button element using javascript? Or is it atleast possible in browsers like Firefox and Chrome?

Believe it or not, for a fairly basic click, you can just call click on it (but more below): Live Example | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Artificial Click</title>
</head>
<body>
<div id="foo">xxxxxxx</div>
<script>
(function() {
var foo = document.getElementById("foo");
foo.addEventListener("click", function() {
display("Clicked");
}, false);
setTimeout(function() {
display("Artificial click:");
foo.click(); // <==================== The artificial click
}, 500);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
</script>
</body>
</html>
You can also create the relevant type of Event object and use dispatchEvent to send it to the element:
var e = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true
});
foo.dispatchEvent(e);
This gives you the opportunity to do things like set other information (the typical pageX and pageY, for instance) on the event you're simulating.
More about the various event object types in Section 5 of the DOM Events spec.

You can use HTMLElementObject.click()
Something like document.getElementById('div1').click()
See more

Or in jQuery (documentation) to click on a non-button element
$( "#nonButton" ).click();
or to listen for a click on that non-button element
$("#nonButton").on("click", doSomething);

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("nonButton").dispatchEvent(evt);
see: https://developer.mozilla.org/en-US/docs/Web/API/event.initMouseEvent

document.querySelectorAll('#front-chat-container div[role]')[0].click()
worked for me - to click a div element.

mousemove handler not called with JQuery .mousemove() or .trigger

when mousemove handler is added with addEventListener(), the handler will never be called
with JQuery simulated event by $(xx).mousemove() or $(xx).trigger(e) where e is a jquery event.
But the listener can be called when the event is simulated with pure JS dispatchEvent.
Anybody can explain? My enviroment is Mac + chrome.
code is here http://jsfiddle.net/eepaul/r8W2h/
<body>
<ul id="id_ul">
<li id="a">oooo</li>
<li id="b">jjjj</li>
</ul>
<p id="console"></p>
</body>
js
var liA = $("li#a")[0];
var ul = $("ul")[0];
var p = $("p#console")[0];
ul.addEventListener("mousemove", function(e) {
$(p).text($(p).text() + "mousemove triggered\n");
}, false);
var event = $.Event("mousemove", {
canBubble:true,
cancelable: true,
view:liA.ownerDocument.defaultView,
detail: 1,
screenX:0, //The coordinates within the entire page
screenY: 0,
clientX: 0, //The coordinates within the viewport
clientY: 0,
ctrlKey:false,
altKey:false,
shiftKey: false,
metaKey:false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
button: 0, //0 = left, 1 = middle, 2 = right
relatedTarget:null
});
//neither of the following 2 ways can trigger the handler
window.setTimeout(function() {
$(liA).trigger(event);}, 1000);
window.setTimeout(function() {
$(liA).mousemove();}, 1000);

Hmm. seems a known issue in jquery.
http://bugs.jquery.com/ticket/4314

Detect if button click real user or triggered by a script

Is there any method that enables me to detect whether a button click was performed by a real user and not some automated method (javascript) that a user has loaded onto their browser developer console or other browser developer tool?
I tried the following methods suggested in various stackoverflow posts but none of them appear to work.
REF: How to detect if a click() is a mouse click or triggered by some code?
Script Detection methods tried and failed:
mybutton.click(function (e) {
if (!e.which) {
//Triggered by code NOT Actually clicked
alert(' e.which - not a real button click')
} else if ('isTrusted' in e && !e.isTrsuted) {
//Triggered by code NOT Actually clicked
alert(' e.isTrusted - not a real button click')
} else if (e.originalEvent === undefined) {
//Triggered by code NOT Actually clicked
alert(' e.originalEvent - not a realbutton click')
}
// else if (!e.focus) {
// //triggered // does not detect e.focus on a real btn click
// alert(' e.focus - not a realbutton click')
// }
else {
// Button hopefully clicked by a real user and not a script
}
})
If I run the following script to trigger the button click from the Chrome browser console none of the methods above traps it as being triggered by a script.
var button = document.getElementById("btnSubmit");
button.click();
==========================================================================
Thank you for all your responses and thanks to stackoverflow for providing such a great site that facilitates so much knowledge sharing and for saving us techies an untold number of hours.
It appears that I still do not have reliable method. All 3 browsers (FF, IE & Chrome) provide a developer/console interfaces for a user to run/inject a javascript on my webpage. It appears that each browser flavor traps some event property values a little differently. For example: Chrome traps the difference between a script activated cick and a real user with e.screenX but in IE: e.screenX has the same value for both a script click (synthetic) and a user button click
The following detection methods either did not work at all or are inconsistent across the different browsers: e.which e.isTrsuted e.originalEvent (event.source != window) (e.distance != null)
The mousedown event appears to be only triggered by a real user button click, but I have to assume there is some script method to emulate a mousedown in addition to a button click event
$(me.container + ' .mybutton').mousedown(function (e) {
alert('mouseisdown real button click');
}
If anyone can figure out a reliable method that works across multiple browsers, that detects the difference between a synthetic (script) button click and a button click by a user, you will deserve superhero status.

when a button click happens through the mouse, the event e usually has the mouse pointer location recorded. Try something like :
if(e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0){
alert("real button click");
}

No, it's not possible in all cases.
As other answers mentioned, you can look for the mouse coordinates (clientX/Y and screenX/Y), and if they're not present, you can assume it was probably not a human-generated action.
But, if the user tabs onto the button and uses the space bar to click it, or otherwise clicks it without using a mouse, the coordinates will also be zero, and this method will incorrectly determine it to be a scripted click.
Also, if the script uses dispatchEvent instead of click, coordinates can be given to the event. In this case, this method will incorrectly identify it as a user-generated click.
// This will produce what appears to be a user-generated click.
function simulateClick(element) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 110, 111, 10, 11, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
http://jsfiddle.net/bYq7m/

For security purposes when you trigger an event with javascript it will register differently than if the user triggered the event. Console log the ev object and you will see significant differences between the two cases.
mybutton.click(function(ev) {
console.log(ev);
});
Here are some sample output of the two cases:
jQuery.Event
currentTarget: button
data: null
delegateTarget: button
handleObj: Object
isTrigger: true
jQuery191011352501437067986: true
namespace: ""
namespace_re: null
result: undefined
target: button
timeStamp: 1360472753601
type: "mousedown"
__proto__: Object
jQuery.Event {originalEvent: MouseEvent, type: "mousedown", isDefaultPrevented: function, timeStamp: 1360472840714, jQuery191011352501437067986: true…}
altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 39
clientY: 13
ctrlKey: false
currentTarget: button
data: null
delegateTarget: button
eventPhase: 2
fromElement: null
handleObj: Object
isDefaultPrevented: function returnFalse() {
jQuery191011352501437067986: true
metaKey: false
offsetX: 37
offsetY: 11
originalEvent: MouseEvent
pageX: 39
pageY: 13
relatedTarget: null
screenX: 1354
screenY: 286
shiftKey: false
target: button
timeStamp: 1360472840714
toElement: button
type: "mousedown"
view: Window
which: 1
__proto__: Object

Use "event.isTrusted" to know event is triggered from Javascript or User click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="myInput">
<button id="myBtn" onclick="callFunction(event)">Click Me</button>
<script>
function callFunction(event) {
console.log(event.isTrusted); // true only when user clicks 'Click Me' button
}
window.onload = function () {
let event = new Event("click");
callFunction(event); // false
}
var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click(); // false
}
});
</script>
</body>
</html>

Fiddle Here.
$("button").mousedown( function(e) {
if(e.which) {
alert(1);
}
});
$("button").trigger("mousedown");
Or Javascript:
document.getElementsByTagName('button')[0].onmousedown = function(e) {
if(e.which) {
alert(1); // original click
}
}
document.getElementsByTagName('button')[0].onmousedown();
You can see in the fiddle, it will not let trigger function to call but only when mouse is down on button. If automated click is triggered on button then e.which is undefined which can be trapped easily.
UPDATE : Fiddle For Javascript

Event object have a nativeEvent object which contains isTrusted field.
Its value will be false when event is not triggered by real user.
So you can check if real user clicked the button by -
if(event.nativeEvent.isTrusted){
//Real user
} else {
//Triggered by script
}