dom-events | 易学教程

How to protect js from custom events

阅读更多关于 How to protect js from custom events

问题 I am writing a game on Javascript with canvas and easeljs and I wonder if there are any ways to protect it. For example, I use stage.Addchild(index) to add a new object to the stage. Simply editing DOM I can attatch new event handler and fire it, something like <body onclick="stage.removeChild(0)"> and this will remove all the stage objects one by one. I was thinking to filter all the coming events and check what had fired it. But I am not sure how to do that and there may be better ways to

Removing directive attribute does not remove listener

阅读更多关于 Removing directive attribute does not remove listener

问题 I have a button with a ng-click attribute. If I remove the ng-click attribute, the listener persists. How can I remove the event listener when I remove the ng-click attribute? angular.module('testApp', ['ng']) .directive('testDir', testDir) .controller('testCtrl', testCtrl); function testDir() { return { compile: (elem, attrs) => { // Remove ng-click attribute elem.removeAttr('ng-click'); } }; } function testCtrl($scope) { $scope.count = 0; $scope.handleClick = function() { $scope.count++; }

Accessing touch properties on Windows Chrome #74

阅读更多关于 Accessing touch properties on Windows Chrome #74

问题 I was experiencing the issue raised here and here. My d3 app works perfectly on Chrome via a touch display on Mac, but d3.drag failed when I switched to the Windows production machine running Chrome v.74. I applied the solution .touchable(navigator.maxTouchPoints) , as suggested by the linked pages above. This allowed me to drag the element in Windows Chrome v.74 using the touch screen, but am now getting: UncaughtTypeError: Failed to execute 'elementFromPoint' on 'Document': The provided

Custom Javascript EventManager - please help me complete

阅读更多关于 Custom Javascript EventManager - please help me complete

问题 I am trying to create a custom javascript EventManager class. I've adopted the format Grant Skinner uses in his easel.js framework for creating the class and need to stick with it. I'm really just lost at this point - I think that - at least in a conceptual sense - I have the right idea here and that it's mostly scope issues that evade me. I'm hoping someone here can help me take this to the point where addListener and dispatchEvent are functional. [code] (function(window) { var EventManager

Adding onsubmit to a form via javascript

阅读更多关于 Adding onsubmit to a form via javascript

问题 How would you go about inserting an OnSubmit attribute to a form via Javascript only? I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful! Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page. Tracking the entire funnel through google analytics is proving quite elusive due to changing

Adding onsubmit to a form via javascript

阅读更多关于 Adding onsubmit to a form via javascript

removeEventListener not working when callback is bound to another object

阅读更多关于 removeEventListener not working when callback is bound to another object

问题 I recently noticed that when a callback is passed to the addEventListener function that is bound to another object, calling removeEventListener later won't work. Example: /* 'this' is referencing e.g. a class */ element.addEventListener('click', this.clickHandler.bind(this)) /* the event listener won't be removed */ element.removeEventListener('click', this.clickHandler) I found a workaround using the default function handleEvent that is being called when you pass an object to

Real world example where event capturing is necessary / preferred?

阅读更多关于 Real world example where event capturing is necessary / preferred?

问题 The addEventListener DOM method supports a third optional, boolean parameter (useCapture) to indicate whether the function should use event bubbling or event capturing as propagation method. In this article the difference is nicely shown (click on the examples & view code). From other questions on SO and blog posts, I concluded event bubbling was preferred mostly because IE8- didn't support it. Suppose I'm only required to support IE9+, in what situation would event capturing be necessary or

click() with links

阅读更多关于 click() with links

问题 I have a page with a few links that are all like this: <a href="/" class="answer-item" rel="0">10</a> I would like to use the click() function to simulate a user's click on one of them, but it doesn't seem to work in my tests. //Evaluate a mathematical expression from another part of the page var numberAnswer = eval(document.getElementById("question-title").getElementsByTagName("b")[0].innerHTML); //Builds an array with the links that may match the expression var choices = document

What is JavaScript's CompositionEvent? Please give examples

阅读更多关于 What is JavaScript's CompositionEvent? Please give examples

问题 MDN is very vague about what the CompositionEvent means. There are no examples and the correlated events, such as compositionstart, compositionupdate and compositionend, also have no examples and don't explain it much better. Quoting MDN: The DOM CompositionEvent represents events that occur due to the user indirectly entering text. And, for events: The compositionstart event is fired when the composition of a passage of text is prepared (similar to keydown for a keyboard input, but fires