dom-events

Prevent browser scroll on HTML5 History popstate

由 流过昼夜 提交于 2019-11-29 18:54:58
Is it possible to prevent the default behaviour of scrolling the document when a popstate event occurs? Our site uses jQuery animated scrolling and History.js, and state changes should scroll the user around to different areas of the page whether via pushstate or popstate. The trouble is the browser restores the scroll position of the previous state automatically when a popstate event occurs. I've tried using a container element set to 100% width and height of the document and scrolling the content inside that container. The problem with that I've found is it doesn't seem to be nearly as

What is the DOM and BOM in JavaScript?

由 ↘锁芯ラ 提交于 2019-11-29 18:43:39
What is the DOM and BOM in JavaScript? If someone could explain these in layman terms it would be great! I like to get a deeper understanding of these. thejh The BOM (Browser Object Model) consists of the objects navigator , history , screen , location and document which are children of window . In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript. DOM - Document Object Model BOM - Browser Object Model This article explains relationship between Javascript, DOM and BOM. They're just

Chrome - Break on attributes modification

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-11-29 18:29:56
问题 I want to break when the class attribute is changed by a script. I tried it with "Break on: attribute modifications" but it doesn't break. 回答1: Workaround The following code will only work if your browser supports MutationObserver. Open developer tools using F12 and execute the following code in the console: var Spy = /** @class */ (function () { function Spy() { } Spy.observe = function (targetNode) { Spy.observer.observe(targetNode, Spy.config); }; Spy.disconnect = function () { Spy

Add Vue.js event on window

由 瘦欲@ 提交于 2019-11-29 17:53:30
问题 Vue.js allow apply event on element: <div id="app"> <button @click="play()">Play</button> </div> But how to apply event on window object? it is not in DOM. for example: <div id="app"> <div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div> </div> in this example, how to listen mousemove event on window ? 回答1: You should just do it manually during the creation and destruction of the component ... created: function() { window.addEventListener('mousemove',this.move); }, destroyed:

Listen for Events from Browser “Find” Window in JavaScript

由 北城余情 提交于 2019-11-29 15:39:46
Is there a way to listen for typing into the browser's "find" window in JavaScript? I'd like to be able to reinterpret the search text from JavaScript. What do I need to add an event listener for? I don't know of any way you can listen for a find -like event and if that's supported in any browser it sure isn't a portable solution. I also don't know what you're trying to achieve but I think that your best option is to listen for the keyboard events that trigger the find window and attempt to cancel them while attempting to emulate the find-toolbar/window with JavaScript of your own. This is

How to listen to custom events on all windows, bubbling issue?

由 可紊 提交于 2019-11-29 15:38:37
I'm trying to listen to custom event 'peakAhBoo' so I add the event listener to gBrowser and if no gBrowser is present then I add it to aDOMWindow ( gist ). Code snippet: loadIntoWindow: function (aDOMWindow, aXULWindow) { if (!aDOMWindow) { return; } if (aDOMWindow.gBrowser) { aDOMWindow.gBrowser.addEventListener('peakAhBoo', respondToCustomEvent_peakAhBoo, true); } else { aDOMWindow.addEventListener('peakAhBoo', respondToCustomEvent_peakAhBoo, true); } }, Code to dispatch event: var myEvent = new CustomEvent('peakAhBoo', { 'detail': { 'hazcheeseburger': true } }); var myEvent = window

How to get Property value from a Javascript object

由 六眼飞鱼酱① 提交于 2019-11-29 15:17:55
问题 I have a JavaScript object. var obj = { Id: "100", Name: "John", Address: {Id:1,Name:"Bangalore"} } var dataToRetrieve= "Name"; function GetPropertyValue(object,dataToRetrieve){ return obj[dataToRetrieve] } var retval = GetPropertyValue(obj,dataToRetrieve) This works fine. But if I try to get the value of property value of "Address.Name" , Like : var dataToRetrieve = "Address.Name"; it shows undefined . Note : The property variable is set by user from HTML And it can be changed according to

Event listener for current and future elements Without jQuery

由 流过昼夜 提交于 2019-11-29 14:53:27
问题 If I remember correctly, I once saw a method to bind event listeners to every single element that matches a certain criteria, a query selector maybe. Looking for it again I cannot find anything other than people highly dependent on jQuery but I prefer a real simple way to achieve this. Anyone knows what is this method called? 回答1: The method you are looking for is called event capturing . You can do it like this: document.querySelector('body').addEventListener('click', function(evt) { // Do

Browser EventListenerList Implementation

由 谁说我不能喝 提交于 2019-11-29 12:48:15
问题 Are there any browsers that implement the DOM3 EventListenerList interface? http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-EventListenerList 回答1: No, it is not currently supported in any browser. See Advanced event registration models 来源： https://stackoverflow.com/questions/2424737/browser-eventlistenerlist-implementation

Detecting when an iframe gets or loses focus

由 蹲街弑〆低调 提交于 2019-11-29 12:03:55
问题 What's the correct way of detecting when an iframe gets or loses focus (i.e. will or will not receive keyboard events)? The following is not working in Fx4: var iframe = /* my iframe */; iframe.addEventListener("focus", function() { /* never gets called */ }, false); 回答1: You can poll "document.activeElement" to determine if it matches the iframe. Polling isn't ideal, but it works: function checkFocus() { if(document.activeElement == document.getElementsByTagName("iframe")[0]) { console.log(
订阅 dom-events