Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to capture click event with jQuery for iframe?

I'm trying to pause the slider on the homepage when a video is played so it doesn't keep sliding. Check it out here.

I've tried adding a div on top of it and capture the click events for the div, but that doesn't work. It just passes the events on to the iframe I suppose. Note that the iframe is loading content from Vimeo, not from my site.

Any ideas on how to make this work, or any other way to pause the slider when the video is played? I seem to be at a dead end with no options...

like image 260
James Skidmore Avatar asked Feb 22 '11 19:02

James Skidmore


People also ask

How can set click event in jQuery?

To trigger the onclick function in jQuery, click() method is used. For example, on clicking a paragraph on a document, a click event will be triggered by the $(“p”). click() method. The user can attach a function to a click method whenever an event of a click occurs to run the function.

How do I find if a click event on a cross domain iframe?

iframe", function() { if(iframeMouseOver){ $j("#os_top"). click(); } }); The above code works like a charm on desktop if you want to add mobile support you just need to use touch events touchstart and touchend events to simulate the mouseover on mobile.

How do you trigger an event on click?

The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.


1 Answers

Another method of detecting clicks in a small iframe, such as the Facebook iframe, is to use the mouseenter and mouseleave events.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisthegovernmentopen.info%2F&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>
var inIframe = false;
$('iframe[src^="http://www.facebook.com"]')
.bind('mouseover', function(){
  console.log('entered iframe');
  inIframe = true;
  setTimeout(function() { 
    if ( inIframe ) { console.log('clicked on iframe'); }
  }, 1000);
})
.bind('mouseout', function(){
  console.log('left iframe');
  inIframe = false;
});

http://jsfiddle.net/gQzeA/

like image 156
Montana Harkin Avatar answered Sep 17 '22 10:09

Montana Harkin