javascript-events

问题 I have a click function bound to many elements. It is possible that sometimes these elements may sit within one another. So, the click event is bound to a child and also bound to its parent. The method is specific to the element clicked. Naturally, because of event bubbling, the child's event is fired first, and then the parents. I cannot have them both called at the same time because the parents event overwrites the event of the child. So I could use event.stopPropagation() so only the first

问题 On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird: Wen in this fiddle http://jsfiddle.net/5ReUn/3/ you do the following: Press left mouse button while the cursor is over HTML button text Move the cursor (while pressed) to an area of the button without text Release the mouse button Then the click event on the button element is not fired! HTML is very simple: <button id="button">Click</button> And the CSS is not sophisticated at all: button { display: block

问题 I'm using the picture element with source 's to choose which image to load. And while I can add a load listener, I cannot figure out which image was loaded as the img tag's src attribute and property are both empty, even when loaded! <picture> <source srcset="images/test1.png" media="(min-width: 64em)"> <source srcset="images/test2.png" media="(max-width: 63.99em)"> <!-- This will alert an empty string "" --> <img srcset="images/test.png" alt="" onload="alert( this.src );"> </picture> How do

问题 I am trying to create a custom javascript event. The event works and fires correctly, but the 'detail' object that I'm passing it is not available. Here's the code i'm using to create and dispatch the event; var double_tap = new CustomEvent("doubleTap", { detail: { hello: 'world' }, bubbles: true, cancelable: true }); this.dispatchEvent(double_tap); Then I'm using jquery to add an event listener to the body; $('body').on('doubleTap', function( e ) { console.log(e); }); It does fire, and the

问题 The best way to understand this is to look at this fiddle. Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll. In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user. jQuery

问题 The best way to understand this is to look at this fiddle. Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll. In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user. jQuery

问题 I want to show and hide (toggle) the <table> onClick event of the <a> . this is my <a> tag <a id="loginLink" onclick="toggleTable(true);" href="#">Login</a> here is my java script function toggleTable(hide) <script> function toggleTable(hide) { if (hide) { document.getElementById("loginTable").style.display="table"; document.getElementById("loginLink").onclick = toggleTable(false); } else { document.getElementById("loginTable").style.display="none"; document.getElementById("loginLink")

问题 In the following example: <li ng-repeat="item in items" ng-click="showItem(item)"> <h3>{{item.title}}</h3> <button ng-click="remove(item)">Remove</button> </li> When I click on the button showItem() also is invoked due to event bubbling. I know that I can use $event to watch for $event.currentTarget and do $event.stopPropagation() etc. but this is very ugly. Btw. I don't want to stop propagation on the button (In my case the button is a twitter bootstrap dopdown/button - this is just an

问题 I'm working on a tracking script for a fairly sophisticated CRM for tracking form actions in Google Analytics. I'm trying to balance the desire to track form actions accurately with the need to never prevent a form from not working. Now, I know that doing something like this doesn't work. $('form').submit(function(){ _gaq.push(['_trackEvent', 'Form', 'Submit', $(this).attr('action')]); }); The DOM unloads before this has a chance to process. So, a lot of sample code recommends something like

问题 When discussing the merits of AngularJS, two-way data binding is often touted as a major benefit of Angular over other JS frameworks. Digging deeper, the documentation suggests this process is done through dirty-checking rather than through event-driven measures. At first, it seems that the digest-loop works by having a method fire off in the background at periodic intervals, checking all the $watch es during each cycle. However, reading further, it seems that the digest-loop is actually