Questions tagged [dom-events]

1

votes
2

answer
30

Views

How to fire a “change” event when the user releases the range slider, even if the value hasn't changed

var control = $('#control'); var zone = 2; const SNAP_TARGET = 1; const SNAP_DISTANCE = 0.1; const LEEWAY = 0.01; function getSliderInfo() { const sliderVal = parseFloat(control.val()); return [sliderVal, sliderVal - SNAP_TARGET]; } control.on('input', function () { const [position, differ...
clickbait
0

votes
1

answer
18

Views

R Shiny - Removing UI using jQuery and onclick event handler

The app below contains an actionButton Add box that creates a box when clicked. Each box has a AdminLTE data-widget = "remove" attribute, so each box has a remove button that is placed in the box-tools div in the box-header. At the moment, clicking the remove button for a box only hides the box rat...
user51462
1

votes
1

answer
1.7k

Views

How to modify the value of v-model property via custom directive?

When I use custom directive to change component's value, there is not effect: Vue.directive('maxchars', { bind(el, binding, vnode) { let maxChars = binding.value; let handler = function(e) { if (e.target.value.length > maxChars) { e.target.value = e.target.value.substr(0, maxChars) } } el.ad...
mail G
1

votes
2

answer
47

Views

How to create multiple objects that each load the same page but with different data in javascript?

I'm having a bit of trouble trying to create multiple different objects on the page that will all send a get request to the same url but with different parameters in the request. The server should return a page but with different data based on which object was clicked to make the request. It's kind...
Ryan O'Shea
14

votes
3

answer
1.1k

Views

Why does a `click` event get triggered on my <button> when I press Enter on it?

I'm only adding a click event handler on my . document.getElementsByTagName("button")[0].addEventListener("click", event => { event.preventDefault(); console.log("Click:", event); }); Press Enter on me (Demo link) Nevertheless, when I tab to the button in Firefox, then press Enter, I see the clic...
Vincent
1

votes
2

answer
1.3k

Views

GWT FocusPanel clickHandler not working when created with a element

Hello fellow GWT folks. In my usage of GWT, I'm having an issue with a FocusPanel not handling the clickEvent that is added to it. I don't do GWT the standard way, ie building the GUI with UI binder or pure java code widgets. My host GWT HTML file is 1 large file that has div tags that represent t...
jason
1

votes
1

answer
930

Views

How to get mouse position in characters inside textarea with Javascript

I am implementing drag'n'drop functionality on the page. The idea is that user can start dragging image from special place and drop it (release left mouse button) inside textarea, where special tag insertion will occur. I have no issues with the dragging itself, the problem I got is that I can't det...
Eadel
1

votes
2

answer
5.1k

Views

symfony 2 dom crawler to loop through and get links

I'm trying to pass the html so I can find the title and link. At the moment I can get all the titles at the same time, when I really want to loop through them one by one. Also I can't get the link, the method link(); method when I hard code an actual name of a link returns, an error Current URI m...
GAV
2

votes
2

answer
39

Views

JavaScript AddEventListener - Backspace

Hello I'm trying to get certain buttons to enable/disable based on what is inside a textbox. Be using the 'backspace' event I want to check the content of the textbox with each action so the buttons enabled/disabled states change accordingly. 'backspace' would be used for deleting content in the tex...
Shadow Zero
2

votes
2

answer
1.9k

Views

Add handler to list box for when user opens list box?

How do I add a handler to when a user just clicks on a list box but doesn't actually select anything? As far as I can tell, onclick on fires when the user selects an item in the dropdown and not when they actually click on it to see the options. (Bonus points if you know how to do this in GWT inste...
Peter
1

votes
2

answer
64

Views

How do I make an <a> element with text-selectable child elements?

I inherited some markup where a series of top-level elements each contain a set of elements, and using CSS, they're rendered as clickable blocks in a list, like this: .list { display: inline-flex; flex-flow: column nowrap; font: 14px Arial; } .list a { display: flex; flex-flow: column nowra...
Sean Werkema
2

votes
2

answer
53

Views

How do i trigger mouse events in fabric.js to simulate mouse actions?

I'm able to get the jquery response on the triggering but the fabric canvas is not acting on the event. I expect this fiddle to deselect the IText element: fiddle I know the fabric canvas got a trigger event, but it's not working too. var canvas = new fabric.Canvas("c"); var test = jQuery("#c"); tes...
Flemming
17

votes
1

answer
4k

Views

Event vs CustomEvent

I was wondering, what is the purpose of CustomEvent, because it can be easily emulated by good old Event. So, what is the difference between: var e = new Event("reload"); e.detail = { username: "name" }; element.dispatchEvent(e); and var e = new CustomEvent("reload", { detail: { username: "name" } }...
Sergey Alaev
18

votes
2

answer
17.4k

Views

React and blur event

I have a simple issue with React and event handling. My component looks like this (basically a table): const MyList = ({ items, onBlur }) => ID Title Publisher Year Author System {items.map(item => )} ; I want the blur event to fire only if the focus goes out of the table. Instead the event fires on...
Peter Perot
2

votes
2

answer
462

Views

Is it possible to capture the window.location.replace event?

If I'm currently at the URL"example.com/somepage#somehash" and I invoke window.location.hash = "anotherhash", the URL changes to "example.com/somepage#anotherhash". This fires the window.hashashchange event. If I am currently at the URL "example.com/somepage?a=1&b=two" and I invoke window.location.r...
abalter
2

votes
4

answer
401

Views

Do we have any generic funtion to check if page has completely loaded in Selenium

I am trying to check if web page is loaded completed or not (i.e. checking that all the control is loaded) in selenium. I tried below code: new WebDriverWait(firefoxDriver, pageLoadTimeout).until( webDriver -> ((JavascriptExecutor) webDriver).executeScript("return document.readyState").equals("compl...
Ankit Singh
4

votes
2

answer
1.4k

Views

use extrapolation to solve mousemove event lag

After some search on this site I understand that I have no control over a browser's mousemove event frequency. So I want to apply some kind of extrapolation method to solve the lagged mousemove event problem. I record every mouse position when the mousemove event is triggered, and calculate the acce...
craftsman.don
5

votes
4

answer
3k

Views

How to use a Select inside a button?

I am trying to figure out how I could place a select inside a button so that I could use the select to select stuff, but the button outside the select would do other stuff onclick. This entire white area is button and the select can be seen inside it. I would like to use all the white area as a butt...
Firze
5

votes
1

answer
185

Views

How do I make a button that gets an external resource AND copies it to the clipboard?

So I have a button that's supposed to make a fancy share URL, shorten it using goo.gl, and then copy that to the clipboard. The great news is, I have successfully done all of that, but just not all at once. The problem stems from the spec: Copy commands triggered from document.execCommand() will onl...
Ben Leggiero
6

votes
3

answer
1.1k

Views

Which versions of IE use standard event model?

I've googled this but can't find a satisfactory answer. Which versions of Internet explorer, if any, implement the W3C DOM level 2 event model?
Mike Rifgin
5

votes
3

answer
19.4k

Views

How to detect a Select change event if changing between two options with the same value?

Select Minimum Coverage Average Coverage Other I have to have both the "Select" and "Other" have empty values because the validation rules on the field do not allow for anything other than an empty string or a numeric value. Bottom line, is I need to be able to detect when the user is on "Select" a...
antonpug
1

votes
2

answer
538

Views

How to know when Google search results page renders its results?

I'm writing a Chrome extension that injects scripts to the Google's search result page and modified all the results' anchor elements. My problem is that the results are rendered asynchronously and are not shown in the page on document load/ready. I had 2 initial solutions which don't work: Set a ti...
Indigon
6

votes
1

answer
980

Views

Listen for jQuery Event With Vanilla JS

So I am trying to determine whether its possible to listen for events added with jQuery using vanilla JS. I found this question: Listen to jQuery event without jQuery which definitely answers it for version 1 of jQuery. How about version 3 however? I have a fiddle that I have put together to test ou...
thatidiotguy
6

votes
1

answer
1.6k

Views

What architectural pattern(s) should I use for my RIA? [closed]

I'm building a web application that interacts heavily with the DOM and need direction in making my code scalable and maintainable. The application overview: Upon interaction, I have toolbars and overlays that guide the user to edit the page, I then send back the edited page to the server. So far I'v...
Gazzou
20

votes
1

answer
17.7k

Views

React onClick - pass event with parameter

Without Parameter function clickMe(e){ //e is the event } With Parameter function clickMe(parameter){ //how to get the "e" ? } this.clickMe(someparameter)}> I want to get the event. How can I get it?
IMOBAMA
2

votes
5

answer
8.1k

Views

Looking for an alternative to the image onLoad [duplicate]

Possible Duplicate: jQuery or JavaScript: Determine when image finished loading The problem is known, but I can't find any simple solution: var img = new Image(); img.onLoad = function() { console.log("load"); // this event doesn't fire }; img.src = "img/domino/21.png"; console.log(img.comp...
ciembor
21

votes
1

answer
10.3k

Views

Have any browsers implemented the DOM3 EventListenerList?

The answer was no back in March 2010: Browser EventListenerList Implementation I'm wondering if there has been any progress since then. If the answer's still no ... any indication of when any browser might support it?
jawns317
2

votes
1

answer
11.4k

Views

How to detect onfocus and blur event of ion-searchbar in ionic2?

I'm now using ionic2 to build an app. I want to detect when the searchbar input get focus and when it blur so that I can hide or show some components according to the current status. (For example, show some suggestions when the user clicks this searchbar.) This is my code: However, I found that this...
awmleer
4

votes
2

answer
211

Views

Do I add eventListener to every SVG element if I follow normal D3 way?

The normal way of handling onclick in d3 is selection.append(element) .on("click", someFunction) If I do it this way on 1000 svg elements, does it mean I just attached 1000 different listeners. If this is the case, is there event delegation for d3 specifically?
Loredra L
2

votes
2

answer
553

Views

OnDrop Event Target is children when dropped over children, even when Capture phase is used

I'm trying to make my Drag and Drop work properly in JavaScript without having to explicitly scan for the parent element nor other ID, class loops and other hacky magic. Right now when I drag one of the elements in the element pool and drag it to the grey zone, the element is copied to the drop zone...
Robert Koszewski
11

votes
2

answer
15k

Views

Emit event from Directive to Parent element

I have an element in HTML template. I add a directive to it: HELLO I want that whenever I hover over the div the text inside the div should be changed, but it needs to be done from Directive (mouseover) event. I don't know how to emit event from a Directive and capture inside a parent element. Any h...
raju
5

votes
1

answer
625

Views

Is there an event or another way to call a Javascript function when a Django Admin Popup (the green plus icon) completes?

Let's imagine we have those Django models: class Band(models.Model): name = models.CharField(max_length=256, default="Eagles of Death Metal") class Song(models.Model): band = models.ForeignKey(Band) When using the admin to manage those models, the band field is associated to a Widget rendered by Dja...
Ad N
4

votes
2

answer
1.8k

Views

Fire event when images in generated content are loaded

I've got a problem with some Javascript-generated content : I use the onload() event of my html page to load HTML code from a server and inject it in the page. Since it already is html I use the innerHtml property of the nodes I want to fill with content. Once I've injected the HTML I call a handmad...
Melekus
2

votes
1

answer
119

Views

JS hide/remove dynamically div with same class name

To make it short, I have a table with multiple rows. Beneath each main row I have a hidden row, that when pressed, presents an input to upload files and a button to make the upload. What I am trying to make is show a .gif while its processing the images and removed the .gif when its done so that th...
calexandru
5

votes
2

answer
8k

Views

jQuery - Event for when an attribute of a node changes

I have a webpage with an external javascript library, and my own extra code. The external library can't be change. It manipulates dom elements, adds new ones, changes attributes (e.g. src on some nodes, etc.). I am using jQuery. Is there any event handler that is fired when the value of an attribut...
Rory
12

votes
3

answer
1.6k

Views

Debugging custom DOM events in browser

Is it possible to see (debug) custom events being fired from DOM elements in the browser? Let's say I want to see which specific element of the Bootstrap Collapse fires the show.bs.collapse event, can I somehow see it for instance in Chrome dew tools?
2

votes
2

answer
6.8k

Views

ignore Mouseout event from child element of Mouseover element

I need to display a tooltip for an image on mouseover. I wrote the following code for that. My current issue is that when I put the image into the tooltip div, the event occurs only for the image element. How can I ignore the mouseover and mouseout event from child element of my parent tooltip di...
Gihan Dilusha
6

votes
0

answer
582

Views

HTMLCollection change event with JavaScript

If I'm assuming correctly, an HTMLCollection is dynamic. In which changes automatically, as items, are added or removed from the document. Is there a way to detect a change in the size of an HTMLCollection using an event handler? Besides using a timer to constantly poll the collection of course.
ryandlf
6

votes
0

answer
830

Views

An event or observer for changes to getBoundingClientRect()

Is there a way to detect when an element's getBoundingClientRect() rectangle has changed without actually calculating getBoundingClientRect()? Something like a "dirty flag"? Naively, I assume that there must be such a mechanism somewhere in the internal workings of browsers, but I haven't been abl...
micahscopes
12

votes
1

answer
5.4k

Views

jQuery $el.trigger('change') doesn't fire native listeners

Consider the following HTML: o1 o2 And JavaScript (performed on document ready): var $select = $('select'); var select = $select.get(0); function logger(msg) { return function () { console.log(msg); }; } $select.on('change', logger('jquery on select')); $(document).on('change', logger('jquery on doc...
noitseuq

View additional questions