Unattach a button from the <li> element

Question

Unattach a button from the <li> element

Within an "li" element, there is a button that triggers a request upon clicking. However, there is another request triggered when the entire "li" element is clicked.

    <li style="cursor: pointer; padding-bottom: 2px;" class="list-group-item"  ng-class="{'active': $index === selectedIndex}" ng-click="showQuery(segname.id, $index, segname)" ng-repeat="segname in segmentsCreatedName">
     <span style="padding: 10px 15px; display: inline-block;">{{segname.name}}</span>
     <a class="btn btn-default pull-right" href="/apps/{{currApp}}/messages/automate/segments/{{segname.id}}/write">AutoMessage</a>
    </li>

I am looking for a way to separate the button from the <li> so that only one request is made when the button is clicked. Is there a solution for this?

javascript html css angularjs

Answer 1

Answer №1

There are two options available to you.

The first option is to halt the click action at the link.

The second option is to verify what was clicked on before executing your function.

This is the basic idea:

HTML:

<div id="x">xxx<a href="#">aaa</a></div>

JavaScript:

document.getElementById("x").onclick = function (e) {  //It's preferable to use addEventListener
   e = e || window.event;
   var target = e.srcElement || e.target;
    if (target.tagName.toLowerCase()!=="a") {
         alert("This is not the link.");   
    }
};

JSFiddle

Answer 2

There are two options available to you.

The first option is to halt the click action at the link.

The second option is to verify what was clicked on before executing your function.

This is the basic idea:

HTML:

<div id="x">xxx<a href="#">aaa</a></div>

JavaScript:

document.getElementById("x").onclick = function (e) {  //It's preferable to use addEventListener
   e = e || window.event;
   var target = e.srcElement || e.target;
    if (target.tagName.toLowerCase()!=="a") {
         alert("This is not the link.");   
    }
};

JSFiddle

Answer 3

Answer №2

Simply put, the method you are describing is not feasible.

If you intend for a function to be executed by clicking on the <li> element, having it both linked and unlinked to an action simultaneously is not possible. This is because the button is encompassed within the <li> element, causing any click on the button to also trigger a click on the element itself.

What exactly is your goal in having a button and a clickable <li> that it is nested within? Providing more details about your intended outcome may lead to a more effective solution being suggested.

Answer 4

Simply put, the method you are describing is not feasible.

If you intend for a function to be executed by clicking on the <li> element, having it both linked and unlinked to an action simultaneously is not possible. This is because the button is encompassed within the <li> element, causing any click on the button to also trigger a click on the element itself.

What exactly is your goal in having a button and a clickable <li> that it is nested within? Providing more details about your intended outcome may lead to a more effective solution being suggested.

Unattach a button from the <li> element

Answer №1

Answer №2

Similar questions

Guide on creating a cookie verification process with no contents

Find two separate solutions to the promise

Validating multiple conditions in Typescript by passing them as function parameters

Styles in CSS for the first column of a table, with the exception of the first cell in

Pressing a key will initiate a time delay before

Front end authentication failed (Angular/Spring stack)

Validating Form Inputs with Multiple Button Options

Dynamically update rows in a React.js component by manipulating hooks for adding or

How to position a fixed width div in the center of a Bootstrap 4 layout with fixed header and footer

Stripping HTML code from JSON response

Ways to navigate back to the previous ajax request

What could be causing the font-weight property (CSS) to fail on certain elements?

Arrange information into sections

Create space adjacent to a div element with CSS styling

Showing an image stored in an array using JavaScript

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

Send the image link as a parameter

Unexpected Behavior in ComponentDidMount

Is it secure to edit and save user HTML using JavaScript?

Displaying upcoming events on the current webpage using a div element