Search completed in 1.04 seconds.
Event.preventDefault() - Web APIs
syntax
event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox.
...<code>preventdefault()</code> won't let you check this!<br>";
event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
... specifications specification status comment domthe definition of '
event.preventdefault()' in that specification.
... living standard document object model (dom) level 2 events specificationthe definition of '
event.preventdefault()' in that specification.
Drag Operations - Web APIs
<div ondragover="return false"> <div ondragover="
event.preventdefault()"> calling the preventdefault() method during both a dragenter and dragover event will indicate that a drop is allowed at that location.
... function dodragover(event) { const islink = event.datatransfer.types.includes("text/uri-list"); if (islink) {
event.preventdefault(); } } in this example, we use the includes method to check if the type text/uri-list is present in the list of types.
... function ondrop(event) { const data = event.datatransfer.getdata("text/plain"); event.target.textcontent = data;
event.preventdefault(); } the getdata() method takes one argument, the type of data to retrieve.
...And 2 more matches
KeyboardEvent.getModifierState() - Web APIs
if (event.getmodifierstate("control") + event.getmodifierstate("alt") + event.getmodifierstate("meta") > 1) { return; } // handle shortcut key with standard modifier if (event.getmodifierstate("accel")) { switch (event.key.tolowercase()) { case "c": if (event.getmodifierstate("shift")) { // handle accel + shift + c
event.preventdefault(); // consume the key event } break; case "k": if (!event.getmodifierstate("shift")) { // handle accel + k
event.preventdefault(); // consume the key event } break; } return; } // do somethig different for arrow keys if scrolllock is locked.
... if ((event.getmodifierstate("scrolllock") || event.getmodifierstate("scroll") /* hack for ie */) && !event.getmodifierstate("control") && !event.getmodifierstate("alt") && !event.getmodifierstate("meta")) { switch (event.key) { case "arrowdown": case "down": // hack for ie and old gecko
event.preventdefault(); // consume the key event break; case "arrowleft": case "left": // hack for ie and old gecko // do something different if scrolllock is locked.
...
event.preventdefault(); // consume the key event break; case "arrowright": case "right": // hack for ie and old gecko // do something different if scrolllock is locked.
...And 2 more matches
CustomEvent - Web APIs
event.defaultprevented read only indicates whether or not the call to
event.preventdefault() canceled the event.
...ideally, you should try to use
event.preventdefault() and event.defaultprevented instead, but you can use returnvalue if you choose to do so.
...
event.preventdefault() cancels the event (if it is cancelable).
Event - Web APIs
event.defaultprevented read only indicates whether or not the call to
event.preventdefault() canceled the event.
...ideally, you should try to use
event.preventdefault() and event.defaultprevented instead, but you can use returnvalue if you choose to do so.
...
event.preventdefault() cancels the event (if it is cancelable).
EventTarget.addEventListener() - Web APIs
event.preventdefault(); alert('inner1, passive, open new page'); } function nonepassivehandler(event) {
event.preventdefault(); //event.stoppropagation(); alert('inner2, none-passive, default, not open new page'); } result click the outer, middle, inner containers respectively to see how the options work.
... polyfill you can work around addeventlistener(), removeeventlistener(),
event.preventdefault(), and event.stoppropagation() not being supported by internet explorer 8 by using the following code at the beginning of your script.
...alue of passive to false, as shown here: /* feature detection */ let passiveifsupported = false; try { window.addeventlistener("test", null, object.defineproperty( {}, "passive", { get: function() { passiveifsupported = { passive: false }; } } ) ); } catch(err) {} window.addeventlistener('scroll', function(event) { /* do something */ // can't use
event.preventdefault(); }, passiveifsupported ); on older browsers that don't support the options parameter to addeventlistener(), attempting to use it prevents the use of the usecapture argument without proper use of feature detection.
Client-side form validation - Learn web development
f the message } else { // if there is still an error, show the correct error showerror(); } }); form.addeventlistener('submit', function (event) { // if the email field is valid, we let the form submit if(!email.validity.valid) { // if it isn't, we display an appropriate error message showerror(); // then we prevent the form from being sent by canceling the event
event.preventdefault(); } }); function showerror() { if(email.validity.valuemissing) { // if the field is empty // display the following error message.
...assname = "invalid"; } }); // this defines what happens when the user tries to submit the data addevent(form, "submit", function () { const test = email.value.length === 0 || emailregexp.test(email.value); if (!test) { email.classname = "invalid"; error.innerhtml = "i expect an e-mail, darling!"; error.classname = "error active"; // some legacy browsers do not support the
event.preventdefault() method return false; } else { email.classname = "valid"; error.innerhtml = ""; error.classname = "error"; } }); the result looks like this: as you can see, it's not that hard to build a validation system on your own.
Sending forms through JavaScript - Learn web development
form.addeventlistener( "submit", function ( event ) {
event.preventdefault(); senddata(); } ); } ); here's the live result: you can even get more involved with the process by using the form's elements property to get a list of all of the data elements in the form and manually manage them one at a time.
... const form = document.getelementbyid( "theform" ); // ...to take over the submit event form.addeventlistener( 'submit', function ( event ) {
event.preventdefault(); senddata(); } ); } ); here's the live result: conclusion depending on the browser and the type of data you are dealing with, sending form data through javascript can be easy or difficult.
Tracking Protection
for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) {
event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit ...
...example.com </a> <script> function tracklink(url,event) {
event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
DataTransferItem.webkitGetAsEntry() - Web APIs
first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) {
event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items;
event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }...
...then we call
event.preventdefault() to prevent the event from being handled further after we're done.
Document: drag event - Web APIs
on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop
event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it i...
...f (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements)
event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Element: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using
event.preventdefault().
...one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase());
event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using
event.preventdefault().
...rget { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument();
event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using
event.preventdefault(), and then insert its desired data manually.
...ocument.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste));
event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Event.defaultPrevented - Web APIs
the defaultprevented read-only property of the event interface returns a boolean indicating whether or not the call to
event.preventdefault() canceled the event.
... html <p><a id="link1" href="#link1">visit link 1</a></p> <p><a id="link2" href="#link2">try to visit link 2</a> (you can't)</p> <p id="log"></p> javascript function stoplink(event) {
event.preventdefault(); } function logclick(event) { const log = document.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('click', sto...
FileSystemDirectoryReader.readEntries() - Web APIs
first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) {
event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items;
event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }...
...then we call
event.preventdefault() to prevent the event from being handled further after we're done.
Index - Web APIs
1244 event.defaultprevented api, dom, event, property, read-only the defaultprevented read-only property of the event interface returns a boolean indicating whether or not
event.preventdefault() was called on the event.
...(mozilla-specific) 1251
event.preventdefault() api, dom, event, method, reference the event interface's preventdefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
KeyboardEvent.key - Web APIs
for a given key press, the sequence of keyboardevents fired is as follows assuming that
event.preventdefault is not called: a keydown event is first fired.
... } // cancel the default action to avoid it being handled twice
event.preventdefault(); }, true); specification specification status comment ui eventsthe definition of 'keyboardevent.key' in that specification.
PromiseRejectionEvent.promise - Web APIs
event.preventdefault() is called to indicate that the promise has now been handled.
... window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); });
event.preventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejectionevent.promise' in that specification.
Window: beforeunload event - Web APIs
examples the html specification states that authors should use the
event.preventdefault() method instead of using event.returnvalue.
...
event.preventdefault(); // chrome requires returnvalue to be set.
ARIA: grid role - Accessibility
var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; }
event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-lab...
... var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; }
event.preventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.
Reddit Example - Archive of obsolete content
event.stoppropagation();
event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script.
Communicating using "port" - Archive of obsolete content
var pagemodscript = "window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.target.tostring());" + " event.stoppropagation();" + "
event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not ...
Content Scripts - Archive of obsolete content
de: ['*'], contentscriptfile: self.data.url("content-script.js"), onattach: startlistening }); function startlistening(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } // content-script.js window.addeventlistener('click', function(event) { self.port.emit('click', event.target.tostring()); event.stoppropagation();
event.preventdefault(); }, false); self.port.on('warning', function(message) { window.alert(message); }); in the add-on above there are two messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string back to the page-mod from tab.attach() the tab.attach() method returns the worker you can use to communicate with the content script(s) yo...
Creating annotations - Archive of obsolete content
useenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation();
event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in your add-on's data directory.
Displaying annotations - Archive of obsolete content
message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation();
event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).addclass('annotated'); $(annotationanchor)...
Implementing the widget - Archive of obsolete content
et's content script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the add-on code: this.addeventlistener('click', function(event) { if(event.button == 0 && event.shiftkey == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shiftkey == true)) self.port.emit('right-click');
event.preventdefault(); }, true); save this in your data/widget directory as widget.js.
Storing annotations - Archive of obsolete content
); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation();
event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it builds the dom for the panel from the array of annotations it is given...
Displaying web content in an extension without security issues - Archive of obsolete content
t handler on the frame tag (meaning that it is outside the restricted document and can execute without restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it
event.preventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
jspage - Archive of obsolete content
y,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.
event.preventdefault){this.
event.preventdefault(); }else{this.event.returnvalue=false;}return this;}});function class(b){if(b instanceof function){b={initialize:b};}var a=function(){object.reset(this);if(a._prototyping){return this; }this._current=$empty;var c=(this.initialize)?this.initialize.apply(this,arguments):this;delete this._current;delete this.caller;return c;}.extend(this); a.implement(b);a.constructor=clas...
reserved - Archive of obsolete content
tcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted accel-t"); // prevent the default browser action
event.preventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, but the default behavior persists.
ContextMenus - Archive of obsolete content
function checkcontextmenu(event) { if (event.target.localname == "textbox")
event.preventdefault(); } function init() { var container = document.getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method.
PopupEvents - Archive of obsolete content
<menu label="edit"> <menupopup onpopupshowing="if (gdisallowed)
event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a global variable gdisallowed is checked and the preventdefault method is called.
More Event Handlers - Archive of obsolete content
example 3 : source view <button label="types" type="menu"> <menupopup onpopupshowing="
event.preventdefault();"> <menuitem label="glass"/> <menuitem label="plastic"/> </menupopup> </button> alternatively, for attribute event listeners, you can just return false from the code.
Client-side storage - Learn web development
displaydata(); }; transaction.onerror = function() { console.log('transaction not opened due to error'); }; } this is quite complex; breaking it down, we: run
event.preventdefault() on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience).
nsIDOMWindowUtils
return value true if the page called
event.preventdefault(), indicating that default processing of the event should not occur.
BeforeUnloadEvent - Web APIs
vent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) {
event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
DataTransfer.clearData() - Web APIs
.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'drop available';
event.preventdefault(); } function dragleavehandler (event) { status.innerhtml = 'drag in process (drop was available)';
event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done';
event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.g...
DataTransfer.getData() - Web APIs
id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent.target.style.color = 'blue'; allowdrop
event.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { drop
event.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result sp...
Document: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) {
event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the ...
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) {
event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); sp...
Event.cancelable - Web APIs
event.preventdefault(); } else { // the event cannot be canceled, so it is not safe // to call preventdefault() on it.
EventTarget.dispatchEvent() - Web APIs
return value the return value is false if event is cancelable and at least one of the event handlers which received event called
event.preventdefault().
Using files from web applications - Web APIs
} }; fd.append('myfile', file); // initiate a multipart/form-data upload xhr.send(fd); } window.onload = function() { const dropzone = document.getelementbyid("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stoppropagation();
event.preventdefault(); } dropzone.ondrop = function(event) { event.stoppropagation();
event.preventdefault(); const filesarray = event.datatransfer.files; for (let i=0; i<filesarray.length; i++) { sendfile(filesarray[i]); } } } </script> </head> <body> <div> ...
GlobalEventHandlers.oninvalid - Web APIs
document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form
event.preventdefault(); } result specification specification status comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onmousedown - Web APIs
pg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px';
event.preventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hideview; re...
GlobalEventHandlers.onsubmit - Web APIs
document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form
event.preventdefault(); } result specifications specification status comment html living standardthe definition of 'onsubmit' in that specification.
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) {
event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification s...
HTMLElement.oncopy - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext;
event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext;
event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) {
event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...
HTMLFormElement: submit event - Web APIs
time stamp: ${event.timestamp}`;
event.preventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('submit', logsubmit); result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLElement.focus() - Web APIs
obsolete notes if you call htmlelement.focus() from a mousedown event handler, you must call
event.preventdefault() to keep the focus from leaving the htmlelement behaviour of the focus in relation to different html features like tabindex or shadow dom, which previously remained under-specified, were recently updated (as october of 2019).
Dragging and Dropping Multiple Items - Web APIs
); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation();
event.preventdefault();" ondragover="event.stoppropagation();
event.preventdefault();" ondrop="event.stoppropagation();
event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dragenter and dragover events by calling the preventdefault().
KeyboardEvent.code - Web APIs
ak; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't get handled twice
event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys.
KeyboardEvent.keyCode - Web APIs
} if (handled) { // suppress "double action" if event handled
event.preventdefault(); } }, true); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
Capabilities, constraints, and settings - Web APIs
function keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2;
event.preventdefault(); } } videoconstrainteditor.addeventlistener("keydown", keydownhandler, false); audioconstrainteditor.addeventlistener("keydown", keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports.
MouseEvent.button - Web APIs
example html <button id="button" oncontextmenu="
event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: ...
Notification.onclick - Web APIs
examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) {
event.preventdefault(); // prevent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification.
PointerEvent - Web APIs
if you use pointer events, you should call
event.preventdefault() to keep the mouse event from being sent as well.
SVGGraphicsElement: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using
event.preventdefault().
SVGGraphicsElement: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using
event.preventdefault().
SVGGraphicsElement: paste event - Web APIs
to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using
event.preventdefault(), and then insert its desired data manually.
SpeechSynthesis.speak() - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web ...
SpeechSynthesis - Web APIs
if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specific...
SpeechSynthesisErrorEvent.error - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the spe...
SpeechSynthesisErrorEvent - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speec...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web ...
SpeechSynthesisUtterance.lang - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification sta...
SpeechSynthesisUtterance.onboundary - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached af...
SpeechSynthesisUtterance.onend - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken af...
SpeechSynthesisUtterance.onerror - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speec...
SpeechSynthesisUtterance.onmark - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); ...
SpeechSynthesisUtterance.onpause - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapse...
SpeechSynthesisUtterance.onresume - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elap...
SpeechSynthesisUtterance.onstart - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech...
SpeechSynthesisUtterance.pitch - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status...
SpeechSynthesisUtterance.rate - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status ...
SpeechSynthesisUtterance.text - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification ...
SpeechSynthesisUtterance.voice - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web ...
SpeechSynthesisUtterance.volume - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification statu...
SpeechSynthesisUtterance - Web APIs
utform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance' in that specification.
SpeechSynthesisVoice - Web APIs
if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function...
Touch events - Web APIs
(var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.push(copytouch(touches[i])); var color = colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); console.log("touchstart:" + i + "."); } } this calls
event.preventdefault() to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered).
Taking still photos with WebRTC - Web APIs
time the user clicks the startbutton, we need to add an event listener to the button, to be called when the click event is issued: startbutton.addeventlistener('click', function(ev){ takepicture(); ev.preventdefault(); }, false); this method is simple enough: it just calls our takepicture() function, defined below in the section capturing a frame from the stream, then calls
event.preventdefault() on the received event to prevent the click from being handled more than once.
Movement, orientation, and motion: A WebXR example - Web APIs
session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addeventlistener("pointermove", handlepointermove); canvas.addeventlistener("contextmenu", (event) => {
event.preventdefault(); }); } if (allowkeyboardmotion) { document.addeventlistener("keydown", handlekeydown); } shaderprogram = initshaderprogram(gl, vssource, fssource); programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexnormal: gl.getattriblocation(shaderprogram, 'avertexnormal'), texture...
Using the Web Speech API - Web APIs
inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); in the final part of the handl...
Window.onbeforeinstallprompt - Web APIs
window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallprompt
event.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window.speechSynthesis - Web APIs
if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) {
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web ...
Window: unhandledrejection event - Web APIs
// prevent the default handling (such as outputting the // error to the console)
event.preventdefault(); }); specifications specification status comment html living standardthe definition of 'unhandledrejection' in that specification.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
canvas.oncontextmenu = (event) => {
event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
ARIA: button role - Accessibility
ressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to stop scrolling when space is pressed
event.preventdefault(); togglebutton(event.target); } } function togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { aud...
<input type="radio"> - HTML: Hypertext Markup Language
event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output;
event.preventdefault(); }, false); try this example out and see how there's never more than one result for the contact group.
Using Promises - JavaScript
you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your output—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */
event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled.
Add to Home screen - Progressive web apps (PWAs)
pt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call
event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chrome 68).