One scenario involved a table with tr's like:
<tr onclick="doprocess1()">
<td>Some data</td>
<td>Some data</td>
<td><button onclick="doprocess2()"</td> <!--I want to disable the clickevent of the <tr> here -->
</tr>
What is the best approach to achieve this?
It is crucial to prevent event bubbling.
Important!
Implement it in a non-intrusive manner.
<tr id="tr1">
<td>Some data</td>
<td>Some data</td>
<td><button id="bt1">Click</button></td> <!--Need to disable the click event of the <tr> element here -->
</tr>
$(function(){
$("#tr1").click(function(){
});
$("#bt1").click(function(e){
e.stopPropagation();
});
});
<td><button onclick="processEvent(event);"</td>
function processEvent(evt) {
evt.stopPropagation();
evt.preventDefault();
// insert your code here
}
This method is compatible with Firefox, Chrome, and IE9. It may not work on older versions of IE where the "event" object is not passed (use window.event instead).
If you're looking for a solution, there are various approaches you can take. For your specific situation, the simplest option might be as follows:
Define doprocess2 in the following manner:
function doprocess2(e) {
e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
...
}
Then, call it like this:
onclick="doprocess2(event);"
This method should function well across all modern browsers, including ie6, ie7, and ie8.
Below is a practical demonstration:
<html>
<head>
<script>
function doprocess1() { alert('tr'); }
function doprocess2(e) {
e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
alert('td');
}
</script>
</head>
<body>
<table>
<tr onclick="doprocess1();">
<td>click tr</td>
<td><button onclick="doprocess2(event);">click td only</button></td>
</tr>
</table>
</body>
</html>
In the process of creating a grid UI, I want users to be able to click on cells and scale them. Intended Outcome: Cells should be prevented from scaling out of the container and being cropped. Cells can overlap with one another when scaled. Only one cel ...
I am currently dealing with the code snippet below: function done(err, file) { //handling of code here return "test"; } function process() { retext() .use(keywords) .process(sentence, done); return val; } The proce ...
Experimenting with the snow-fall animation and aiming to stop it after 5 seconds. Added animate within setTimeOut but no effect observed. What could be missing here? Here's the current code: function fallingSnow() { var snowflake; snowflake = ...
Is it possible to measure the duration of a $.getJSON method call using timing code in jQuery/JavaScript? Additionally, is there a method to determine the size of the response Content-Length, measured in kilobytes or megabytes? ...
In the process of designing a form that involves booking, I am in need of a calendar component where users can input their desired date. Is there an existing calendar solution available rather than starting from scratch? My development stack includes html ...
Is it worth utilizing a Comet for events that do not require real-time updates, but can have a delay of around 1 minute? Examples could include: updates on Twitter statuses notifications on Facebook While Comet is commonly used in chat applications (suc ...
After creating a Test.js file, I added two lines of JavaScript code: var x = 5; console.log("The answer is: " + x); The desired output would be: "The answer is: 5" I am curious if there's a way to view this outcome in the Aptana Scripting console, ...
My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...
Is it possible to utilize the iron-iconset element to assign multiple icons from an external SVG file that contains all of my icon variations (each line representing a specific icon with its color, state, etc.)? Imagine something like this: <iron-icons ...
I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...
In my JavaScript code, I have an "if condition" that looks like this: for (var i in data) { //Gender.push("Gender " + data[i].JenisKelaminID); if (data[i].JenisKelaminID == 1) { Gender.push("Men"); } if (data[i].JenisKelaminID == 2) { Gend ...
I have the following paths: export const ACCOUNT_PORTAL_PATHS = [ 'home/*', 'my-care/*', 'chats/*', 'profile/*', 'programs/*', 'completion/*', ] If the cur ...
Currently, I am working on a project where I need to add a prefix "bio(" and a suffix ")" to my JSON data in order to make it callable as JSONP manually. I have around 200 files that require this modification, which is why I am looking for a programmatic ...
I'm currently working on populating a table using JavaScript. However, I've encountered an issue where the table is being populated but it shows "No data available in table". Furthermore, when I try to interact with the data, it disappears. This ...
Currently, my goal is to generate a table using data from a csv file. The csv file contains three pre-filtered fields to avoid any issues. However, when I execute the code, no output is generated in the report file. I suspect there may be an error while pr ...
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property-feed', templateUrl: './property-feed.component.html', styleUrls: ['./property-feed.component.scss'] }) export class Prope ...
Received a JSON response similar to the one below { "SNGS": { "$": { "xmlns": "csng", "xmlns:ns2": "http://www.w3.org/1999/xlink" }, "Defec ...
I'm struggling to come up with a name for it, but I'll do my best to explain. $(document).on('click','.swaction',function(event){ var pdfId = $(this).closest('tr').find('td:first').html(); // For examp ...
Enhanced Functionality: Upon clicking the "Tap Here" image button, a function called "GameStart()" is triggered. This function ensures that the main image "Star" descends down the page from the top through an animated sequence using png logic. The propose ...
After calling setUsersData() and addNewUser(), they should return an Observable<void> once their tasks are complete. Surprisingly, despite the code seeming to work correctly, the tap operator's function is not being executed as expected. The sam ...