Questions tagged [dom-events]

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
1

votes
1

answer
42

Views

Catch a single element’s own deletion event

I need to be notified of the deletion of a particular HTML DOM element. I’m achieving this using a MutationObserver. To keep anything as simple as possible, I though it would be better to observe the target element for its own. MutationObserver seems to not catch anything if it observes an element...
Hibou57
1

votes
1

answer
47

Views

How to hook google analytics into parsleyjs events

In my application I want to send a google analytics event when a parsleyjs validation error occurs. This is the approach I've come up with so far but I'm finding it wanting. $('#myForm').parsley().on('field:error', function(e) { var label = $('label[for='' + e.$element.attr('id') + '']').text() || '...
Gary Boyle
1

votes
2

answer
451

Views

pass event to triggerHandler in angular

I want the same menu to appear when clicking on multiple different buttons. How can I pass the original click event to the new created triggered event? This is what I do today: this.openMenuFromOther = function(event) { $timeout(function() { var ele = document.getElementById('userMenu'); angular.ele...
Mike
1

votes
1

answer
422

Views

Options to pass DOM mouse events from child <object> to parent page

I have a SPA that uses a widget drag/drop model for users to design their own dashboard by dragging widgets onto a design surface. Widgets are HTML pages with embedded javascript that are added to the parent DOM with tags. I have a particular use case where the parent page needs to know the mouse p...
deandob
1

votes
2

answer
196

Views

onClick event not firing in React redux ToDoList application

The onClick event is not firing at all.I am able to add todos and toggle todos but when i click on Completed todos or NotCompleted todos nothing happens.Here is the complete code for the class. There is an add to do which adds the todos.then there is a toggle to do which strikes or unstrikes a todo....
RagingBull
1

votes
2

answer
325

Views

Why does Firefox fire a mouseenter event on page load?

When hovering over an element and then refreshing the page (without moving the mouse): Chrome does not fire the mouseenter event on page load Firefox does fire the mouseenter event on page load Below is an example snippet. To reproduce the issue, hover over the div and then refresh the page. In Chro...
Pete
1

votes
1

answer
349

Views

Polymer 2 - Perform action every time element is shown via iron-pages/iron-selector

I'm attempting to create a logout page that will work even after that element has been attached once to the DOM. This occurs when you get a login, then logout, then login again, and attempt to log back out. For instance, the shell has I also have an observer for page changes in the shell: static get...
ModernDeveloperLLC
1

votes
1

answer
173

Views

Prevent absolutely positioned div from swallowing click events without disabling scrollbar

Version 1 Code The following code is (a simplified version of) the layout I'm using in a project : document.getElementById('map').addEventListener('click', function(e) { alert('Map clicked!'); }); document.getElementById('control1').addEventListener('click', function(e) { alert('Control 1 clicke...
John Slegers

View additional questions