JavaScript/jQuery – how to differentiate between a triggered and user click?

Question

this question looks similar like In Jquery, how can I tell between a programatic and user click?

But i am not able to get it, my code

<div class="sample_class" onclick="sample_fn(arg1,arg2,arg3,arg4, e);" ></div>
<div class="trigger_class" onclick="trigger_fn()></div>


function sample_fn(arg1,arg2,arg3,arg4, e){
    console.log(e) ;
    console.log(e.isTrigger);
    console.log(e.hasOwnProperty('originalEvent'));
}


function trigger_fn(){
    $(".sample_class").trigger("click")
}

on click on div.sample_class i am getting in console Object undefined false

on clicking div.tigger_class i am getting in console same thing Object undefined false

I am unable to differentiate between these two clicks. Thanks in advance

Then why are you simulating a click? Write a new function that doesn't share the same code. You might also read up on [event namespacing](http://docs.jquery.com/Namespaced_Events) or [custom events](http://corymathews.com/jquery-custom-events/) to see if they'd help your situation. — Blazemonger, Jun 07 '12 at 14:25
In your HTML you have `onclick="tigger_fn()"` and in the Javascript you have `function trigget_fn()` - typos aren't going to help make anything work. If they're not in your actual code they shouldn't be in your question either. — Anthony Grist, Jun 07 '12 at 14:26
use e.isTrusted to identify when user action triggered the event — mohit bansal, Jan 22 '16 at 18:39

Mottie · Accepted Answer · 2012-07-01T17:27:51.203

9

UPDATE: As of jQuery 1.7+, the event object (e in the code below) object will contain a property named e.isTrigger which is true if the event was triggered and undefined if not triggered; this is undocumented so check this (demo) before using it. If using an older version of jQuery, use the code below.

It might just be easier to pass a flag to your function. Here is a demo:

HTML

<button>Trigger a click below</button>

<div id="test">Click Me</div>

Script

$('#test').click(function(e, triggered){
    var msg = (triggered) ? ', triggered' : '';
    console.log('clicked' + msg);
});

$('button').click(function(){
    // pass a true flag to the click function to indicate
    // it's been triggered
    $('#test').trigger('click', true);
});

Update: data-attributes can contain valid JSON which is automatically converted into an object (demo):

<div class="test" data-args='{ "quantity": 1, "type": "pizza", "extra1": "peperoni", "extra2": "cheese", "extra3": "cheesy bread" }'>Click Me</div>

Note that the data-arg uses a single quote to contain the JSON, but the JSON inside MUST use double quotes around each key and value (unless it's numeric).

Then use the data method to extract the information:

var args = $(this).data('args');

Alternatively, you can make a separate data-attribute for each argument (demo):

<div class="test" data-quantity="1" data-type="pizza" data-extra1="peperoni" data-extra2="cheese" data-extra3="cheesy bread">Click Me</div>

Then use gather all of the data from the element as follows:

var args = $(this).data();

edited Jul 01 '12 at 17:27

answered Jun 07 '12 at 15:00

Mottie

84,355
30
126
241

Actually onclick function are not binded using jquery. So this doesnt help in my case have modified your demo http://jsfiddle.net/hQAWv/ . – druveen Jun 08 '12 at 02:10
There is no need to use `onclick`, you can add the specific arguments into data-attributes and obtain them that way. – Mottie Jun 08 '12 at 02:25
or [do this](http://jsfiddle.net/Mottie/hQAWv/1/) : `function trigger_fn(e) { test_fn(e, true); }` – Mottie Jun 08 '12 at 02:27
but i have lot of extra arguments which need to be passed – druveen Jun 08 '12 at 04:26
I've updated my answer showing how data-attributes can be used. – Mottie Jun 08 '12 at 08:17
Thanks for data-attributes , it was new to me. But i manged with setting a global variable true/false. – druveen Jun 08 '12 at 08:25
1

No problem, I was just showing you how you can use data-attributes to write [unobtrusive javascript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) – Mottie Jun 08 '12 at 08:32
I've added an update to my answer. In jQuery 1.7+ there is a new event property named `event.isTrigger` which is `true` if the event was triggered. Demo included in the edit. – Mottie Jul 01 '12 at 17:29
Wouldn't it be possible to use the `which` property from the event for click events for older jquery versions? It doesn't seem to be set when triggered. Requiring third party code to add specific arguments isn't always an option. – Martijn Feb 10 '14 at 19:10

JavaScript/jQuery – how to differentiate between a triggered and user click?

1 Answers1