The nested click event is not functioning as expected

Question

The nested click event is not functioning as expected

Below is a simplified version of HTML code containing 2 nested click events (one on the href and one on an input). When the user clicks on the input field, it inadvertently triggers the javascript function SelectTable() linked to the href event. This unintended behavior needs to be fixed. Do you have any suggestions on how to prevent this from happening?

Your assistance in this matter would be greatly appreciated.

Here is the code:

<a href="javascript:SelectTable();">
<table  id="tableproduct1" class="notselectedElement">
     <tr> 
        <td> Number of elements: <input type="text" name="nrofelements"> </td> 
     </tr>
</table>
</a>

javascript

Answer 1

Answer №1

Implement this functionality using the eventListener.

Here's a sample code snippet based on your initial code:

var aTag = document.getElementsByTagName("a");
aTag.addEventListener("click", aTagFn, false);
var iTag = document.getElementsByTagName("input");
iTag.addEventListener("click", inputTagFn, false);

Update:

I've created a similar version on jsfiddle1 to address the issue you're encountering.

I used a boolean variable as a simple workaround:

isclicked = true;

function a() {
    if (isclicked) {
        alert("a tag is clicked");
    }
    isclicked = true;
}

function b() {
    alert("input tag is clicked");
    isclicked = false;
}

You can test it out on JSFiddle2

Answer 2

Implement this functionality using the eventListener.

Here's a sample code snippet based on your initial code:

var aTag = document.getElementsByTagName("a");
aTag.addEventListener("click", aTagFn, false);
var iTag = document.getElementsByTagName("input");
iTag.addEventListener("click", inputTagFn, false);

Update:

I've created a similar version on jsfiddle1 to address the issue you're encountering.

I used a boolean variable as a simple workaround:

isclicked = true;

function a() {
    if (isclicked) {
        alert("a tag is clicked");
    }
    isclicked = true;
}

function b() {
    alert("input tag is clicked");
    isclicked = false;
}

You can test it out on JSFiddle2

The nested click event is not functioning as expected

Answer №1

Similar questions

Monitoring Twitter bootstrap modal for scrollbar reaching the bottom

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

Sending an image dynamically as a prop to a child component

substitute elements within an array using elements from a different array

What could be causing my CSS navigation toggle button to malfunction?

Enabling a mat-slide-toggle to be automatically set to true using formControl

Receiving partial data through the API

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

My Javascript code is being modified by Wordpress to include '<p>' tags

extracting values from an array using the map function in React

Encountering a Next.js application error while utilizing the button tag in conjunction with generating metadata

I have successfully integrated my custom external JavaScript code with React Router, and everything is working

Different ways to maintain the original syntax highlighting colors in JavaScript console

Arranging objects in an array using jQuery for optimal organization

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Searching for an AngularJS and Bootstrap Dual Listbox Solution

Tips for adding a border to a 3D pie chart in Highcharts

Using next.js and redux for user authentication: a step-by-step guide