-1

I tried to implement this javascript code taken from the other thread here: css 'pointer-events' property alternative for IE, but I cannot make it work. When I click the target iframe element, the desired "click-through" effect did not come to reality. I tried it in jsfiddle.com too but it doesn't work either... I must have missed something important. Can someone show me how to do this code correctly in jsfiddle? Thank You very much.

$(document).ready(function() {
    $(document).on('mousedown', '#iframe_1', function (e) {
        $(this).hide();
        var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
        $(this).show();
        $(BottomElement).mousedown(); //Manually fire the event for desired underlying element
        return false;
    });
});

The iframe won't even hide... https://jsfiddle.net/c4vttL6t/

Kelvin C
  • 27
  • 6

1 Answers1

0

The event is not fired because you have to register the event on the content of the iframe, not in the iframe itself. You can achieve this with something like this:

var iframeBody = $('body', $('#iframe-1')[0].contentWindow.document);
$(iframeBody).on('mousedown', function(event) {
    $('#iframe-1').hide();

    return false;
});

But beware, if you are loading content from other site, this could not work.

Code taken from here

Update: Maybe this code could help you, taking into consideration that the iframe are one on top of the other:

// iframe-1 mousedown handler
var iframeBody1 = $('body', $('#iframe-1')[0].contentWindow.document);
$(iframeBody1).on('mousedown', function(e) {
    //$('#iframe-1').hide();
    // alert mousedown 1
    alert('mousedown 1');
    return false;
});

// iframe-2 mousedown handler
var iframeBody2 = $('body', $('#iframe-2')[0].contentWindow.document);

// search and trigger mousedown handler on X element
var iframeDocument1 = $("#iframe-1")[0].contentWindow.document;

// iframe-2 mousedown handler
$(iframeBody2).on('mousedown', function(e) {
    //$('#iframe-2').hide();
    // calculate position relative to element if necessarily 
    $(iframeDocument1.elementFromPoint(e.pageX, e.pageY)).mousedown();

    // Alert mousedown 2
    alert('mousedown 2');
    // as you are using iframe I think hide and show is not necessary
    // because you can trigger mousedown handler on a particular element
    //$('#iframe-2').show();
    return false;
});
ybrajim
  • 112
  • 7
  • i put this in jsfiddle and it still doesn't work........ any idea how to make it work? – Kelvin C Jun 15 '17 at 03:36
  • Yes... I've updated your [fiddle](https://jsfiddle.net/ybrajim/c4vttL6t/1/) – ybrajim Jun 15 '17 at 04:08
  • by the way, you did not add jQuery to the fiddle, so when try to use it the execution failed because does not find the library – ybrajim Jun 15 '17 at 04:10
  • Thanks for the update. I added the library this morning with onload function and saw that it worked as well. The iframe on top does hide but I cannot get the mousedown to affect the iframe below the top iframe, starting from "var BottomElement = document.elementFromPoint(e.clientX, e.clientY)". It seems the iframe below is not affected. Btw, the iframe below is much bigger than the iframe on top – Kelvin C Jun 15 '17 at 07:31
  • What are you trying to do? Why are you using so many iframe? I think you have to try using other html elements like `div` instead of iframe, using `iframe` is like you have a page inside another page, each one independent from the other. But I'll update my answer with a code that could be useful. – ybrajim Jun 15 '17 at 22:53
  • OH!!!! Thank you for the update! It's been really helpful of you~ Yes, I think it works the way I want~ thumbs up for your answer~ – Kelvin C Jun 20 '17 at 18:53