有没有办法检测元素是否被 jQuery 的 click() 单击？

Question

I'm not too sure if this is possible, but is there anyway of achieving this? I want to have some basic protection from scripts that will automatically register click events on my buttons, eg: pesky bots.

I want to only allow clicks with the mouse, not clicks triggered by javascript itself.

Any ideas or other methods of protection against this?

Answer 1

You want to identify that the click event has triggered through element click or through any js code, right?

In that case you can use "event" object returned by "click" event

You can use

event.hasOwnProperty('originalEvent')

above statement returns true if the event is triggered by clicking on target element else returns false

Answer 2

Note: Note sure how foolproof is this.

There is an originalEvent property that will be set when the user triggers the click event, so you can check it I think

$('div').click(function(e){
    console.log(e, this, e.originalEvent)
    if(e.originalEvent){
        console.log('user clicked')
    }
}).click();

Demo: Fiddle

Answer 3

You can register a mouseDown event handler on the button and only process the .click() event if the .click() event occurs within a certain time after the mouseDown (eg a second).

function now() {
    return (new Date()).getTime();
}

$("#myButton").on("mousedown click", function(e) {
    var self = $(this);
    if (e.type === "mousedown") {
        self.data("mousedownTime", now()); 
    } else {
        var mouseTime = self.data("mousedownTime");
        if (mouseTime && now() - mouseTime < 1000) {
            // process the click here
        }
    }
});

This could be turned into a jQuery plugin method that would do this for you, fairly easily.

jQuery.fn.realClick = function(fn) {
    this.on("mousedown click", function(e) {
        var self = $(this);
        if (e.type === "mousedown") {
            self.data("mousedownTime", now()); 
        } else {
            var mouseTime = self.data("mousedownTime");
            if (mouseTime && now() - mouseTime < 1000) {
                // process the real click here
                return fn(e);
            }
        }
    });
}

$("#myButton").realClick(function(e) {
    // your click processing code here
    // only gets called if a click event was
    // preceded by a mousedown event within 1 second
});

Answer 4

One possible way to achieve this is using Google Analytics. Something like the below maybe, tweaked to your goals?

<p class="downloadsmall">download: <a href="jpg/LOW/1.jpg" onClick="_gaq.push(['_trackPageview', '/downloads/img/LowRes/1.jpg']);">Low Res</a></p>


<!-- GA track all onClicks -->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'YOUR COOL GA ID']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/"+x+"']);

$(function(){
    $('.downloadsmall a').on("click", function(){
        var theHREF = $(this).attr('href'),
            myGAQ   = _gaq || [];
        myGAQ.push(['_trackPageview', theHREF]);
        myGAQ.push(['_trackEvent', 'Downloads', 'JPG', theHREF]);

    });
});

</script>

<!-- End GA track all onClicks -->

Answer 5

This?

$('#id').on('click', function(){
  console.log('clicked');
});

I'm not sure if I 100% understand your question. That would obviously log something if it was clicked. Are you looking for a way to prevent that from happening?

Answer 6

You can use Event.isTrusted .

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().

Example:

 document.getElementById("click-me").addEventListener("click", function(e) { if (e.isTrusted) { console.log("This click is real"); } else { console.log("This click is not real"); } }); document.getElementById("test").addEventListener("click", function(e) { document.getElementById("click-me").click() });

 <button id="click-me">Click me</button> <button id="test">Click to simulate click on the other button</button>