Unable to execute event.target.blur() function as expected

I am facing an issue with my Bootstrap buttons setup. Here is an example:

<button :disabled="page === lastPage" type="button" class="btn btn-default" @click="getPage(lastPage)">
    <span class="glyphicon glyphicon-forward"></span>
</button>

Interestingly, the first line in the getPage method seems to be ineffective:

event.target.blur();

Curiously, I have another button in a different component where event.target.blur() works perfectly:

<button class="btn btn-default pull-right" @click="show()" type="button">Batch
    <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span>
</button>

Any idea why this discrepancy might exist?

UPDATE: It appears that the issue arises when clicking inside the SPAN element where the blur function does not work as expected.

UPDATE: Problem resolved - I also needed to include event.target.parentNode.blur() for it to work properly.

javascriptvue.js

Answer №1

If you're looking to disable a certain element, you can consider using

event.currentTarget.blur()

This will consistently target the element to which the event listener is attached, whereas event.target refers to the element that triggered the event.

Answer №2

When deciding on an approach, I lean towards utilizing

if (document.activeElement != document.body) {
    document.activeElement.blur()
}

instead of traversing nodes directly, as it provides a more stable solution in case the markup undergoes modifications.

Answer №3

When dealing with buttons that have a span element inside, it's important to address the issue of users clicking on either the button itself or the span. In order to effectively blur the button, the following approach was taken:

event.target.blur();
event.target.parentNode.blur();

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

Changing guid bytes into a string using JavaScript

Currently, I am receiving an arrayBuffer from a WebSocket connection and within that, I am able to obtain a range of byte arrays representing a Guid created in C#. I am wondering how I can convert these Guid bytes to a string in JavaScript? Guid: "FEF38A ...

javascriptwebsocketbyteguidarraybuffer

The WebSocket connection in the browser, when accessed through a remote server, typically shows a CLOSED state in the readyState property during the on

Local server operations are running smoothly. However, when testing on a remote server with Nginx, the issue arises where the readyState inside the event handler onopen is consistently showing as CLOSED. Nginx configuration: server { server_name doma ...

javascripttypescriptnginxwebsocketws

Stop AngularJS $http promise from fetching cached JSON data

During the signup process of my AngularJS application, I continuously update a user object. Instead of creating separate controllers for each signup step, I have opted to use one controller for all steps as the logic is quite similar and it helps keep the ...

javascriptjsonangularjsangular-promiseangular-http

Having trouble loading my script in the frontend plugin?

After much testing, I have discovered that when I place this code before the get_header() function, the script is successfully loaded. However, when I move it after the get_header() function, it no longer works as intended. It's important to note that ...

javascriptjquerywordpress

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

javascriptweb-componentcustom-elementhtml5-template

What's the best way to keep track of the number of objects I've created

Using this HTML code, I can create member objects. However, I also need to determine the count of these member objects for certain calculations. Additionally, when a member object is deleted, the count of member objects should be reduced accordingly. The ...

javascriptc#htmlajax

Having trouble with processing the binding? Use ko.mapping.fromJS to push JSON data into an ObservableArray

Hey everyone, I'm struggling with my code and could really use some help. I'm new to knockout and encountering an issue. Initially, I receive JSON data from the database and it works fine. However, when I click 'Add some', I'm tryi ...

javascriptjsonajaxknockout.js

When attempting to access the Object data, it is returning as undefined, yet the keys are being

I have an Object with values in the following format: [ { NameSpace: 'furuuqu', LocalName: 'uuurur', ExtensionValues: 0, FreeText: 'OEN', '$$hashKey': 'object:291' }, { Nam ...

javascriptjsonobjectstringifyjsonparser

Avoid clicking on links while the webpage is still loading

I am facing an issue with my website where I need to intercept link-clicking events using jQuery. Everything works fine, but there is a problem if a user clicks on a link before JavaScript finishes loading, causing it to redirect to another page in error. ...

javascripthtmljqueryjquery-events

Display data as a JSON object using Highcharts

Looking to populate a highchart in Jade using JSON data sent from Node.js. Currently, I have successfully added static data as shown in the code snippet below: var series = [ { name: 'Tokyo', data: [7.0] } ]; Now, I am attempti ...

javascriptjsonnode.jshighchartspug

Using Node.js Express to showcase a JSON file utilizing Class Methods

Recently diving into node.js and express, I attempted to display a JSON file containing an array of 3 objects using a class method Below is the Class structure: const fs = require('fs') class GrupoArchivo { constructor(filePath) { t ...

javascriptnode.jsarraysjsonexpress

Parsing JSON sub items in Android application using Java

Here is a snippet of my PHP file: <?php $myObj = array( "name"=>"John" , "age"=>"30" , "post"=>[ "title"=>"What is WordPress" , "excerpt"=>"WordPress is a popular blogging platform" , ...

javascriptphpandroidjsonhttpurlconnection

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

javascriptjquerycsscordova

Encountering issues with AJAX requests using jQuery

Hey there, I'm attempting to make an AJAX call in a C# page and I'm running into some issues. Below is my jQuery code: $(document).ready(function () { $.ajax({ type: "POST", url: "conteudo.aspx/GetNewPost", data: { i ...

javascriptc#jqueryajax

Juggling PHP scripts within javascript

Can you help me with a question I have? I am working on multiple JS scripts, such as this one: <script> $('#mapveto1').click(function() { $('#mapveto1').addClass('banned'); $('#map1').text('cobble ...

javascriptphpjqueryhtml

Can the loading of the window be postponed?

I've created a script that displays a message when the user first visits the website. The message then fades out, followed by another section fading in after a short delay. $(window).load(function() { $(".greeting").delay(1500).fadeOut("500"); ...

javascriptjquerywordpress

Ways to decrease the size of this item while maintaining its child components?

Here is an object that I am working with: { "name": "A", "children": [ { "name": "B", "open": false, "registry": true, "children": [ { ...

javascripttypescript

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

Switching Angular fxLayout from row to column based on a conditional statementHere is an explanation of how to

Visit this link for more information Is there a way to set direction based on a specific value? <div if(value) fxLayout='row' else fxLayout='column'> ...

javascriptangularangular-flex-layout

Displaying dynamic text using radio buttons utilizing React

Currently, I am in the process of developing a multiple choice quiz where each question is presented with various options displayed as radio buttons. My main objective is to show specific text related to the option selected by the user when they make a ch ...

javascriptreactjsradio-button