Can't prevent propagation of click within item-link list

Questions
1

Hello,
I have a list with linked items, and a button in the ‘item-after’ div. Whenever I click the button, the list is also clicked. This is my HTML

<li data-user-id="16">
    <a class="item-link" href="/Test4/">
        <div class="item-content">
            <div class="item-media" href="/Test4/">
                <img class="circle" src="http://dnet/upload/photos/d-avatar.jpg?cache=0" alt="Test4" style="width:48px;height:48px;">
            </div>
            <div class="item-inner">
                <div class="item-title-row">
                    <div class="item-title">
                        Test4 </div>
                    <div class="item-after"><span id="Follow-16">
                            <button type="button" class="button button-fill button-preloader prevent-active-state-propagation" onclick="RegisterFollow(16)">
                                <span class="preloader">
                                    <span class="preloader-inner">
                                        <span class="preloader-inner-circle"></span>
                                    </span>
                                </span>
                                <span class="icon material-icons">person_add</span>
                                <span>Follow</span>
                            </button>
                        </span></div>
                </div>
                <div class="item-subtitle">Intern, General Practice (unspecialised)</div>
                <div class="item-text"></div>
            </div>
        </div>
    </a>
</li>

Any help is really appreciated, as I have been stuck at this for a while.

2

don’t use href and use custom click handler instead on both <a> and <button> and in event handler check what is e.target to determine what action should be executed

1 Like
3

I actually ended up putting the button outside the < li > and styling it to be over the item with an absolute position. Thanks a lot, Vladimir.