Questions tagged [dom-events]

0

votes
1

answer
16

Views

Issue in IE11 want flex-content-item to occupy full width same as table

Issue in IE11; I want flex-content-item to occupy width same as table with scroll bar. I tried using some flex concept but did not work. To understand where is flex-content-item I have added a red border. Now this border is available till 100%, I want it to wrap the entire table. This is working in...
Vishal Patil
1

votes
2

answer
51

Views

Display a div using a radio buttons

To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked. I'm actually following these two links Adding event listeners to multiple elements...
Spanish beginner
1

votes
4

answer
351

Views

Zoom only when Ctrl + scrolling

I've been messing with the D3JS source code. What I want to achieve is only allow zooming with the Scrolling (Just like Google Maps), if CTRL is pressed too. I've been messing with the complete D3: https://d3js.org/d3.v4.js I was trying to achieve this around line 16556: function wheeled() { if (!fi...
CAJ69I
1

votes
1

answer
178

Views

Tooltip with own event listeners

Sorry if this is partially duplicate, couldn't find any satisfactory answer. I have a d3 graph that consists of a line with points. My points have events that make a tooltip appear/disappear, see below: var div = d3.select('body') .append('div') .attr('class', 'tooltip') .style('opacity', 0); var po...
ddsLeonardo
-3

votes
0

answer
16

Views

Why is Safari much slower to handle a click event than chrome or firefox?

I have a grid like visualization created with D3 in which for each row of data, I attach a click handler onto the row label text (svg text element). In chrome and firefox, the click handler receives the event and performs the behavior in less than a second. In Safari, it takes upwards of 10 seconds...
user2518159
1

votes
1

answer
49

Views

Handling Microsoft Windows display scaling not 100% in Javascript

I have a JavaScript application that moves a HTML widget based on the location of the mouse on the screen with a drag function. I use screenX and screenY to determine the mouse location as the mouse will move across other widgets (embedded HTML using the OBJECT tag) which will swallow the mouse even...
deandob
1

votes
0

answer
172

Views

How can I simulate a “touchmove” event on an html element?

I have a script tag on a website which I am using to manipulate the page after load. Since the site is built using a host of frameworks and libraries interacting with the page using JS can be difficult. Often the easiest way to get the page to respond is by simulating a user click which is a piece o...
Jake C
1

votes
2

answer
147

Views

mouseenter delegation using vanilla JavaScript?

How do I implement event delegation for the mouseenter event? I'm looking for the equivalent to this jQuery code, but didn't manage to understand how jQuery does it internally: $(document).on('mouseenter', '.demo', foo); I've seen this other question about it, but no proper solution was provided. I...
Alvaro
1

votes
2

answer
118

Views

How to access the target of an $event bound to a DOM element using a custom directive?

I've created a directive import { Directive, AfterContentInit, Output, EventEmitter } from '@angular/core'; @Directive({ selector: '[attached]' }) export class AttachDirective implements AfterContentInit { @Output('attached') private ee: EventEmitter = new EventEmitter(); ngAfterContentInit() { setT...
tom
1

votes
1

answer
55

Views

react: preventing form submission not working on Firefox

I have written some code which is mentioned below in the snippet. It posts form data to the server in order to download a CSV file. Chrome is working as expected. However, in Firefox, the page always reloads when calling the downloadCSV function. The following a element is contained in one of my com...
XeniaSis
1

votes
0

answer
112

Views

Weird touch/click events stack

I'm handling 5 events on a button - touchstart, touchend, mousedown, mouseup and click (assume that I'm creating something simillar to a 'ripple button'). For touchstart / mousedown I'm using unified handler as well as for touchend / mouseup When there is no touch input then everything is fine. But...
Levitator Imbalance
1

votes
0

answer
41

Views

<object> onload not firing in Chrome

Loading a PDF in an tag, I want to show an indicator while the document is being loaded instead of just an empty element, so I positioned a Load Panel over the . I added a function to hide the panel: function documentLoaded() { // Code to hide panel here. } And set it to fire in the onload event of...
Valuator
1

votes
1

answer
43

Views

Event when clicking a tel link in mobile firefox

I'd like handle an event when a tel: link is clicked on a website and send it as an event to analytics. The following code seems to work fine on the desktop, but fails to send an event on a mobile. function report_tel_click() { ga('send', 'event', 'tel-link', 'click'); } window.addEventListener('loa...
viraptor
1

votes
0

answer
36

Views

Is there a way to capture the end of the event of Element.scrollIntoView()?

I'd like to flash the targeted element for three times after it being scrolled into view. I've looked up in the documentation however didn't find anything about capturing events. Is there a way to achieve this? Thanks.
Jinghui Niu
1

votes
1

answer
37

Views

How to stop event from firing when hiding element in a change event

I've found a bug when I'm using a keyboard to select from a select drop down, the form containing the drop down is submitted, this only happens on IE. The drop down is in a div and has a JS handler for the change event. In the handler the div containing the drop down is hidden, this causes a submit...
Ben
1

votes
1

answer
56

Views

How to keep showing the 'popover' on hovering on the anchorEl and 'popover' as well?

Here in this example of material-ui https://material-ui.com/utils/popover/#mouse-over-interaction Follow these steps for the example material-ui https://material-ui.com/utils/popover/#mouse-over-interaction In the above example keep the mouse on the text Hover with a Popover. --- you see the popove...
Akhila Hegde
1

votes
1

answer
22

Views

Add class to active tab && Add class inActive to inactive tab

I have three 'li' tabs and one showTab 'div'. I want that the clicked tab to show in showTab and this is working fine, but I also want to add class active to the clicked tab, and add inActive class to other tabs (siblings) that are not clicked. One tab should have always active class. I'm totally ne...
VenRus
1

votes
1

answer
38

Views

Couldn't detect F11 keypress in Javascript

keypress, keydown, keyup - none of these events get triggered when F11 key is pressed both in Mac and Windows. Is this the expected behavior? I have created a demo var logSpace = document.getElementById('log'); var log = function(event) { console.log(event.type, event); var p = document.createEle...
Rakshu27
1

votes
2

answer
60

Views

Add new created label and input-text to form using dom Javascript?

I have three fields that will be filled by the user. one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still mis...
titi
1

votes
0

answer
33

Views

Is it possible to add drag events like dragstart, dragend, dragdrop etc on custom HTML elements in Web Components

I tried to add event listeners for drag and drop on custom elements created in Web components. But it does not fire the events. The component I tried is actually nested inside another component. Any one knows how to solve this? -- Main Element (custom) -- Nested Element (custom) Firing events at thi...
Treesa
1

votes
1

answer
57

Views

mouseover event not firing till clicked on Google Chrome

I'm trying to run a function when the cursor is over a list item like so: {{item}} new Vue({ el: '#vue-app', data: { items: ['meat', 'fruits', 'vegetables'], }, methods: { removeItem(value) { ... } }, }); however the mouseover event only fires when I click on the list item. What am I not doing corre...
Ibra
1

votes
0

answer
36

Views

Pagination based upon users choice of number of rows

I want to perform pagination using vanilla javascript, where each page will contain atmost x, rows, where x, is the value selected by the user in the select tag. I tried doing something like this, but it is not working. Help will be appreciated. 1 2 5 10 Click Me! Head col 1 Head col 2 first row col...
taurus05
1

votes
1

answer
19

Views

Firefox WebExtension popup - 'click' event functional, but 'unload' is not working (instead, 'blur' works fine)

When I change 'unload' to 'blur' its working (unfortunately - even when I take away focus only from the button calling 'scroll' function). I want 'stopScrolling' to be executed after user closes (clicks outside) the popup window. I've also tried 'beforeunload' event, which is also not functional. Be...
residue
1

votes
1

answer
28

Views

Triggering the scroll of a different dom object by scrolling on an object that doesn't need to scroll with vanilla Javascript

I have a small scroll interaction that works beautifully in the elements that need to scroll. But I'd like to have the scroll behaviors of OTHER objects happen when I scroll over an object that doesn't need to scroll. For instance, with the following code, I want the allScroll event to trigger the s...
Dave Merwin
1

votes
1

answer
31

Views

Control component states from App.js and change their values

I have an IOT application that communicates with ble devices. So I use react-native-ble-manager. In this package, you have to use event listeners such as; bleManagerEmitter.addListener( 'BleManagerDidUpdateValueForCharacteristic', this.handlerCharListenerSettings); (For more information you can chec...
erdouzun
1

votes
2

answer
39

Views

EventListener for hiding an Element

I am trying to find a Javascript event that will be triggered when an element's Display is set to none. style='display: none;'. I have to use vanilla JS (cannot use jQuery) and, unfortunately, cannot implement Mutation Observer as a possible solution. In other words, I am trying to find an event to...
GMe
1

votes
0

answer
32

Views

The proper use of the coordinates in the JavaScript “touchEvent”

Hi I am preparing an eventHandler with 'touchEvent' in JS. I used pageX and pageY coordinates when I was calculating normally. I have used this information seamlessly for events like 'tap, swipe, drag, twicetap'. But finally, in order to catch the 'Pinch' in / out, I also looked at the 'pageX and...
BOZ
1

votes
1

answer
37

Views

Is there a way to add an event listener on two separate divs and be able to know when the user clicked outside of one by itself?

I am writing Javascript code that shows pictures on a category based on the ones the user clicked on but will show all categories when clicked outside the filtered pictures. Yet, I need the same code to work on separate divs independently, not the whole dom. Attaching the event listener to the docum...
tuffw
1

votes
2

answer
36

Views

Custom cypress command that returns when apex page ready

I'm trying to make cypress work for Oracle apex. However, it seems that the page is not fully loaded when returning from my custom command. I want to do return w.apex; only when the apex event 'apexreadyend' has been triggered (this is the last event in a page load for oracle apex). How can I do thi...
Wouter Rombouts
1

votes
4

answer
50

Views

How to allow only string in input text field

How to allow only string input on text_field using rails haml form. .field = f.label 'agent_name' = f.text_field :agent_name, :required => true,:id=>'agent_name_validation' $('#agent_name_validation').keypress(function(event) { var string = /^[a-z]+$/i; if(event.which != string){ return false; } })...
Suman Das
1

votes
2

answer
127

Views

Javascript event refuses to die

I have a page which has two different event listeners picking up click events from inside the page. One listener is generic to the site, the other is specific to the page. Recently, a link was added which runs through the first handler, which processes it, opens the url in a new window and then stop...
Scheiner
1

votes
1

answer
1.1k

Views

Need javascript event after returning mvc FileResult

My app does a form.submit() that invokes an action that returns a FileResult (an attachment). Prior to submit I have javacript that puts up a 'please wait' div. I need to clear it when the result is returned. For actions that return a response that writes the page, I use the window.onload event...
Elroy Flynn
1

votes
1

answer
37

Views

How to detect screen orientation in mobile website when using react js and orientationchange event?

I want to detect screen orientation changes using the event orientationchange, which is supported by all major mobile browsers. I add the event listener in componentDidMount and set the state from inside the event callback. However, I see that when the event first fires as a result of change from po...
hitchhiker
1

votes
2

answer
584

Views

HTML frame's onload is called before the content is loaded

I am writing a simple Greasemonkey script for Java SE API reference doc [http://docs.oracle.com/javase/8/docs/api/ ]. It goes as: // ==UserScript== // @id Test // @grant none // @include http://docs.oracle.com/javase/8/docs/api/* // @version 1 // @run-at docuitment-end //...
Xolve
1

votes
1

answer
877

Views

Modify `target` of mouseEvent object for Event Delegation

Is it possible to modify the target property of a mouseEvent? I have an event delegator function, delegator(parentSelector, childSelector, event, callback), which is used to bind events listeners to parent dom nodes (useful when child nodes are replaced dynamically). This works very well, except in...
Michael Jasper
1

votes
1

answer
36

Views

How to access js event object in a super type that is called from a subtype? [duplicate]

This question already has an answer here: What is the reason to use the 'new' keyword at Derived.prototype = new Base 6 answers I write different parsers of the HTML context of an event in a webpage. The basic structure goes like this: registering the event and link it to a parser function. elem.a...
Cutú Chiqueño
1

votes
1

answer
876

Views

How can i trigger a click event (on a file type input) inside a promise?

I've been having problems with this for a while and i can't find a solution anywhere, basically i am trying to trigger a click event on an input file type but this event needs to be triggered inside a promise, when i try to trigger the event directly inside the promise the console logs an error sayi...
David Munoz
1

votes
2

answer
117

Views

Capture phase vs Bubble phase - why the following code it's not producing the same result?

I want to implement my own DnD in pure Javascript - first for learning purposes - then maybe i'll use it - and i stumbled upon this bubble/capture concept. I thought i got it, by reading the accepted answer on this question: What is event bubbling and capturing?, and other articles as well. But i di...
AIon
1

votes
1

answer
248

Views

How to convert jQuery event handler into pure JavaScript

I used to have code that uses: $(document).on('click', 'a[href^='http']', () => {}); To intercept link clicks. For complicated-to-explain reasons, I had to move this code somewhere before jQuery is loaded. How can I write this code in pure JavaScript?
Ruben Martinez Jr.
1

votes
2

answer
116

Views

prevent HTML5 date field from triggering change event on keypress

When using a HTML5 date field, every key input triggers the change event on the field on Chrome. See jsFiddle and try to input the date manually to see the effect: https://jsfiddle.net/hx3zcenj/4/ document.getElementById('dateFilter').addEventListener('change', function(){ document.getElementById('m...
Pjottur

View additional questions