Firefox won't fire click event

Question

I've got a firefox only problem (the script works fine in chrome, opera, safari and even edge).

The problem: There is a download-button with an a-tag within a div-container. Now I want the click on the div-container to direct to another href than the download-button.

To get the idea of the boxes:

<div class="imacontainer>
___________________________________
|.download-lightbox               |
|                                 |
|                                 |
|                                 |
|          [DL-BTN]               |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|_________________________________|
    <h3><a href="link">title</a></h3>
</div>

The workaround I wrote is this:

$("imacontainer").click(function(e){
    if(e.toElement.className == "download-lightbox") {
        e.preventDefault();
            var target = $(this).children("h3").children("a").attr("href");
            window.location.href = target;
    }
});

Any ideas why this won't work in firefox only?

Answer 1

尝试使用e.target

if($(e.target).hasClass("download-lightbox")) {

Answer 2

your code should work fine in IE, but other browsers may have an issue with the use of the toElement property of the event object, which is a IE-specific property, so you need to check first which property is available like in your code

 $("imacontainer").click(function(e){

     var toElem =  e.relatedTarget || e.toElement;

        if(toElem.className == "download-lightbox") {
            e.preventDefault();
                var target = $(this).children("h3").children("a").attr("href");
                window.location.href = target;
        }
    });

Note - I haven't actually tried your code in all browsers i just gave you idea about take care of cross browsers