在Anchor标记中嵌套可点击组件

Question

Let's say I have some large DIV filled with content.

The content is dynamic, it could be anything, and it can include different types of clickable components - buttons, videos, links, etc.

I need the DIV itself to be clickable and route to some URL, but at the same time I need the different types of clickable components to be usable as well. If you press any of them, it shouldn't invoke the routing at the DIV level.

I've tried different approaches, none seem to work:

1. Wrap the entire DIV with an A tag - any click inside the DIV will route to the URL, and none of the clickable components will be usable. Moreover, this prevents having other A tags inside that DIV as you can't nest A tags
2. Add an onclick event to the DIV and route accordingly - this solves the A tag nesting problem, but again none of the clickable components is usable.

The only reasonable solution that I can see is to handle click events on all the clickable components and to perform stopPropagation on the attached event so it won't bubble up to the DIV.

But, this solution is just unfeasible for me as inside that DIV there could be components that are not under my control, like iframes with unknown content and functionality, video controls, etc.

Is there a different approach I can use that I'm missing?

Update:

I went ahead to manage click events and stopPropegation on the different components.

On A tags it works great.

But when I have a video element with different control buttons, I tried to wrap it in a div and stopPropegation on that DIV, but it doesn't seem to work, not sure why.

Update 2:

This is getting weirder by the minute...

So I solved the video element clicks by adding both stopPropegation and preventDefault at the wrapping DIV. I have no idea why i needed to use preventDefault. Makes no sense.

Now I'm facing a different problem with another component. I have a Bootstrap carousel, I'm wrapping it with a DIV and tried to stopPropegation on click events on that DIV, also tried to add preventDefault. When I stopPropegation on that DIV the carousel buttons stop functioning!?

Some help and explanations would be greatly appreciated..

Update 3:

I figured I could use the defaultPrevented value on the event in order to figure out if to perform the routing on the main DIV element or not.

I wrapped my main div with an A tag with a ui-sref attribute (forgot to mention this is an Angular app..), and binded to the ng-click event.

But for some reason (seems to be related to ui-sref), jQuery's IsDefaultPrevented always returned true.

So I replaced the A tag with a DIV and performed the state change inside the controller after checking the IsDefaultPrevented value.

So now it's all working. But I'm not really sure why.

Answer 1

Look at my code; hopefully this 'll solve your issue;

The html is consider like this :

<div id="div1" style="width:50px;height:50px;background-color:red">

         <a href="#">Hello</a>

</div>

The js code is like;

$(document).ready(function(){

    $("#div1").click(function(){
        alert("on div1");
    })

    $("#div1 a").click(function(e){
        e.stopPropagation();
        alert("on div1 a");
    })
})

Now if you click on "Hello" ; only "on div1 a" alert will show.