Geek asks and answers

Is there a way to determine if a jQuery click () element has been clicked?

I'm not sure if this is possible, but are there any achievements? I want to have basic protection against scripts that automatically log click events on my buttons, for example: pesky bots.

I want to allow only mouse clicks, not clicks caused by javascript itself.

Any ideas or other protection against this?

+3
source share
5 answers

You want to determine that a click event caused an element to click or through any js code, right?

In this case, you can use the event object returned by the click event

you can use

event.hasOwnProperty('originalEvent')

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

+5

. , .

originalEvent, , click, . ,

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

: Fiddle

+3

mouseDown .click(), .click() mouseDown (, ).

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
        }
    }
});

jQuery, .

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
});
+3

Google Analytics. - , , ?

<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 -->
+2

?

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

, 100% . , , -, . ?

0

More articles:


All Articles