Double click event on a disabled JavaScript button

I need assistance with a button that triggers a double click event regardless of whether the button is enabled or disabled. Previously, I posted a similar query on this topic here. However, I now face the challenge of running a function from a disabled button that utilizes the this parameter. When I attempted the <span> workaround as suggested in the previous question, it provided information about the <span> element rather than the <button> element.

Here is a helpful example on jsfiddle.

Can anyone provide guidance on how to overcome this issue?

Answer №1

Let's start by addressing the issue of having two elements with the same IDs. Your markup should be structured like this:

<button name='name_of_button' id='id_of_button1' ondblclick="runFunction( this );">Enabled Button</button>
<br>
<button name='name_of_button' id='id_of_button2' ondblclick="runFunction( this );" disabled>Disabled Button</button>

Secondly, it is recommended to avoid using inline javascript. You can solve your problem by organizing your code in the following way:

HTML:

<div class="wrapper">
    <button name='name_of_button'>Enabled Button</button>
    <div class="over"></div>
</div>
<div class="wrapper">
    <button name='name_of_button' disabled="disabled">Disabled Button</button>
    <div class="over"></div>
</div>

JS:

window.onload = function() {
    var dblClicked = function() {
        console.log(this.parentNode.childNodes[1].removeAttribute("disabled"));
    }
    var overlays = document.querySelectorAll(".wrapper .over");
    for(var i=0; i<overlays.length; i++) {
        var over = overlays[i];        
        over.addEventListener("dblclick", dblClicked);
    }
}

http://jsfiddle.net/NRKLG/12/

If an element is disabled, it cannot trigger events. To work around this, you can place a transparent overlay div over the button to capture the events.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fetch data in JSON format from a specified URL

I have been attempting to fetch a JSON from a specific URL. Here is my current code snippet: <script> var co2; $(document).ready(function(){ alert("0"); $.getJSON(url,function(result){ var jsonObject = result; alert(result); ...

Exploring the issue of $scope variable changes not reflecting in ng-show elements in AngularJS

I am in the process of creating a website that includes a video element. For those interested, here is a link to the code for my page on Plunker: http://plnkr.co/edit/5NUnZ2KET1apWwxMxjex?p=preview The video on the website utilizes the html5 video tag, a ...

Execute a function and simultaneously input data into MySQL using Node JS

Is there a way to simultaneously insert data from multiple external data sources into a database? I have several APIs/Endpoints that provide the same dataset, and I want to insert them all at once. For instance: Right now, my code loops through each API ...

Is there a way to manually add a function to the Javascript/Nodejs event queue?

Suppose I want to achieve the following: function doA(callback) { console.log("Do A") callback() } function doB() { console.log("Do B") } function doC() { console.log("Do C") } doA(doC) doB() I expect the output to be: Do A Do B Do C However ...

Two draggable elements and two droppable containers all conveniently placed on a single webpage

My current project involves two sets of draggable elements and two sets of droppable elements. I'm trying to achieve a specific functionality where the first set of draggable elements can only be dropped inside the first set of droppables, while the ...

The directives applied within ng-include are not functioning correctly

Below is a custom directive I have implemented. var fancySelectDirective = pluginDirecitvesModule.directive("custom-select",function(){ return { restrict: 'C', link: function (scope, element, attrs) { ...

Access JSON value using jQuery by key

Creating a JSON structure that contains information about attendees: { "attendees": [ { "datum": "Tue, 11 Apr 2017 00:00:00 GMT", "name": " Muylaert-Geleir", "prename": "Alexander" }, { "datum": "Wed, 12 Apr 2017 ...

Show the helper text when a TextField is selected in Material UI

I would like the error message to only show up when a user clicks on the TextField. Here's my code: import React, { useState, useEffect } from 'react'; import { TextField, Grid, Button } from '@material-ui/core'; const ReplyToComm ...

Exploring JSON Data with Mustache Templates

Dealing with a significantly large JSON object that I can't control, I'm struggling to output a list of records (related to people in this case) using Mustache.js. Despite simplifying the complex object into a more manageable one with just the ne ...

Strange yellow border appears when key is pressed in Quasar's QLayout

While working on a project with the quasar framework and electron.js, I encountered a strange bug where pressing a key causes the application frame to display a persistent yellow border. This border cannot be overridden, removed, or selected using devtools ...

Application: The initialization event in the electron app is not being triggered

I am facing an issue while trying to run my electron app with TypeScript and webpack. I have a main.ts file along with the compiled main.js file. To troubleshoot, I made some edits to the main.js file to verify if the "ready" function is being called. ...

Transmitting special symbols through Socket.io

I've been working on a small project based on Socketio 0.9 and everything is running smoothly, except for a minor problem with special characters. In the web client, I am creating a dynamic JSON object using JavaScript that is then emitted to the ser ...

My handleChange function is inaccessible to the event listener

ParentComponent.js (App.js) import React from "react"; import ChildComponent from "./ChildComponent"; import data from "./data"; import "./styles.css"; class ParentComponent extends React.Component { constructor() ...

Creating input fields dynamically within Yii2 framework

I'm currently facing a challenge with forms in Yii2. My objective is to design a form that includes three dropdown menus, inquiring about the user's preferred time(s) during the week. The first menu will focus on selecting days of the week, while ...

Error: Attempted to submit an invalid or unexpected input token

I want to display my ship registration number from the database in an AJAX response. I am using a method to send my field and then show the ship registration number in another function. Here is the code snippet that I have debugged: show_name(2d1c9a71586 ...

Manipulate Nested Objects using an Array of Keys

Currently, I am developing a recursive form using React and MUI that is based on a nested object. Throughout this process, it is crucial for me to keep track of the previous keys as I traverse through the recursion. As users interact with the form and mak ...

Creating a multi-dimensional array in JavaScript with two different sizes

I'm struggling to find the best way to create a multi-dimensional array with varying sizes dynamically. Our user interface requires a pattern where there are rows of 4 items followed by rows of 3 items. This pattern should continue until all contents ...

Guide on updating a single element in a Firebase array

I have an array stored in my firebase database, structured like this: matches:[ {match:{id:1,data:...}}] I am looking for a way to update just one specific item within this array. Let's say I want to locate the match with the ID of 32 and modify its ...

Unable to retrieve data from Meteor find query

I have a collection created in collections.js portfolioItems = new Mongo.Collection('portfolioitems'); This collection is then subscribed to in subscriptions.js Meteor.subscribe('portfolioitems'); And published in publications.js M ...

Modify the selected toggle buttons' color by utilizing the MUI ThemeProvider

I am currently working on customizing the color of selected toggle buttons within my React app using TypeScript and ThemeProvider from @mui/material 5.11.13. Despite my efforts, when a toggle button is selected, it still retains the default color #1976d2, ...