dom-events | 易学教程

Prevent force touch event on image but still allow long press event in iOS Safari

阅读更多关于 Prevent force touch event on image but still allow long press event in iOS Safari

问题 We have a need in our image gallery to prevent Apple's Force touch events on images, but still allow the long-press which triggers the 'Save Image' callout. We provide instructions for our iOS users to long-press on the image and then select 'Save Image', but users get very confused if they accidentally press too hard and trigger a Force Touch event - especially if it 'pops' and loads the image in a new page. Initially I thought of listening to the touchforcechange events, and then calling

How to hook IE keyboard event?

阅读更多关于 How to hook IE keyboard event?

问题 I am trying to disable browser shortcuts while user tries to press some combination of keys on the swf file. Although I can achieve this in Firefox, below code does not function in IE 8. Below code is able to hook the keyboard events if focus is not on the swf file. However, what I need is hooking keyboard events when user operates on swf file. function hookKeyboardEvents(e) { alert("hooked key"); // get key code var key_code = (window.event) ? event.keyCode : e.which; // case :if it is IE

How do I synthesize a browser click event on a DIV element?

阅读更多关于 How do I synthesize a browser click event on a DIV element?

问题 With buttons, I can call the click() method on them to have a click generated. DIVs however don't have this method on all browsers. Yet I can attach click event listeners to them (by either setting .onclick="..." or adding an event listener). Is there any way for me to "synthesize" a click on such an element programmatically, but without using jQuery ? Ideally this will not be dependent on a specific way of the listeners being registered (so simply calling eval(div.onclick) will not work for

Dojo: dojo onblur events

阅读更多关于 Dojo: dojo onblur events

问题 I have a form setup with dojo 1.5. I am using a dijit.form.ComboBox and a dijit.form.TextBox The Combobox has values like "car","bike","motorcycle" and the textbox is meant to be an adjective to the Combobox. So it doesn't matter what is in the Combobox but if the ComboBox does have a value then something MUST be filled in the TextBox. Optionally, if nothing is in the ComboBox, then nothing can be in the TextBox and that is just fine. In fact if something isn't in the Combobox then nothing

Click handler on <svg> element

阅读更多关于 Click handler on element

问题 It seems that using a <svg:svg> </svg:svg> element does not render anything in Safari or Chrome, but using <svg> </svg> works fine. However, adding an onclick only works on <svg:svg> elements. What is the proper way to do this? This jsfiddle demonstrates the problem (compare Safari/Chrome to Firefox). 回答1: Okay, turns out that the first way of creating a SVG creates the onclick only on the drawn part. That means you can actually do something nice (maybe not useful in your case). In this

mouseover and mouseout events firing on children

阅读更多关于 mouseover and mouseout events firing on children

问题 The code: <div id="Navigation" onmouseover="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" onmouseout="new Effect.toggle('Drop_Down','slide',{duration: 0.8});"> <div id="Drop_Down"> <% include Navigation %> </div> </div> If I mouseover the Navigation the Drop_Down div slides down, and if I mouseout it slides up. The problem is if I mouseover the child Drop_Down div it also slides up. Does anyone know how I can fix that? 回答1: Use the mouseenter and mouseleave events instead new in

How to Add Event Handler with Arguments to an Array of Elements in Javascript?

阅读更多关于 How to Add Event Handler with Arguments to an Array of Elements in Javascript?

问题 I have a three-step process that is entirely reliant upon JavaScript and Ajax to load data and animate the process from one step to the next. To further complicate matters, the transition (forward and backward) between steps is animated :-(. As user's progress through the process anchor's appear showing the current step and previous steps. If they click on a previous step, then it takes them back to the previous step. Right now, the entire process (forward and backward) works correctly, if

Prevent click event from propagating/bubbling onto Google Maps

阅读更多关于 Prevent click event from propagating/bubbling onto Google Maps

I am using the MarkerClusterer library for Google Maps API V3 to group nearby markers into a single marker. When the user clicks on the cluster marker, a div appears beside that cluster marker. Now I want to make it such that after clicking on the cluster marker, to close the div that popped up, he can click on the map. Problem: After adding a google.maps.event.addListener(map, 'click', function(){}) on the map, when the user clicks on the cluster marker to open the popup div, nothing happens!! I'm guessing the click event on the cluster marker caused the div to popup, but the click event also

Mobile Safari sometimes does not trigger the click event

阅读更多关于 Mobile Safari sometimes does not trigger the click event

问题 This is a dynamic JavaScript application I am working on. I have many <a> anchor elements that have a class. When that class is clicked, something should happen. This works fine in Firefox, Chrome, IE, but in some cases the click event is not triggered on mobile Safari (iPad and iPhone). These elements all have exactly the same CSS, it's just their position that differs (they are in different containers). I tried various solutions that I found here but with no luck. For instance: setting the

Remove event listener with d3js not working

阅读更多关于 Remove event listener with d3js not working

I have an SVG structure where there are some shapes inside. I want to fire an event when a shape is clicked and another one when is clicked over the SVG. The problem is the SVG event is always fired. In order to prevent this I'm disabling event bubbling from the shape. Also I've tried to disable the event with d3 but seems to not work. Also tried to disable event with the native Javascript code. An example of the super simple code is: SVG structure <svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g> <circle class="shape" r="10" cx="10" cy="10"> </g> </svg> Javascript code d3