Develop Reference

How do I prevent users to multi-tap (tap the screen with more than one finger at the same time) in a web page?

I created a JavaScript page to collect user's click/tap data. However, I don't want user to use more than one finger to tap on the screen. Currently, I have no way to filter out those multi clicks. I would like to totally dismiss the taps by more than one finger. What can I do? It's a web-page and I need things to be done by JavaScript.
Thanks,

You could check the touches field in the event listener to see if more than one touch point was part of the touch event.
document.addEventListener('touchstart', (ev) => {
if (ev.touches.length > 1) {
ev.preventDefault();
ev.stopPropagation();
document.body.style.background = 'red';
return false;
}
document.body.style.background = 'green';
return true;
});

Open bootstrap dropdown on input focus

I have an input that when clicked shows a bootstrap 4 dropdown BUT I need it to open when a user tabs to it as well for ADA accessibility.
If I use a focus event that uses $('#input-name).dropdown('toggle') it works fine, but when the input is clicked focus fires first which opens the dropdown and then the click event closes it.
I have tried e.preventDefault(); e.stopPropagation(); but neither help solve this issue.
events: {
focus #healthPlanMenu": "openDropDown"
}
openDropDown: function (e) {
if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
}//fails
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
$( "#healthPlanMenu" ).click();//fails
}

So ideally you'd probably solve this by having the focus event set the dropdown's state to open, that way if it gets "reopened" by the click event, no problem. However, as far as I can tell there is only a toggle option with the jQuery API; seems unnecessarily limiting...
Given that, we can know if a click is coming after our focus event by using mousedown. So a somewhat hacky way to solve this problem is to disable our focus event if we know a click is coming.
(function() {
var disable = false;
$('#healthPlanMenu.dropdown-toggle')
.on('mousedown touchstart', function() {
disable = true;
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle');
}
})
.on('mouseup touchend',function() {
disable = false;
})
})()
I don't know if the touchstart and touchend are necessary as most browsers probably fire mouse events on touch as well. But better safe than sorry.

JQuery is not triggering atbar button

I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.

Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?

Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});

You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.

Scroll the page when a canvas is touch dragged

I have an HTML5 canvas that users interact with by clicking (or tapping).
$(function() {
var canvas = $('#annotations');
canvas[0].addEventListener('mousedown', clickCanvas);
canvas[0].addEventListener('touchstart', clickCanvas);
});
function clickCanvas(e) {
markLocation(e);
drawCanvas();
e.preventDefault();
}
This works as expected. However, on mobile devices if you tap and drag this registers a click at the point where the tap started (this makes sense because it's hooked up to touchstart). The page does not scroll as it normally does when you touch-drag outside the canvas.
When dragging, I would like the tap to be ignored and the whole page scrolled instead.

I was able to resolve this by:
Removing e.preventDefault();
Hooking up canvas[0].onselectstart = function () { return false; } to prevent text being selected when the canvas is double-clicked (this was what e.preventDefault() did in the first place)
Replacing touchstart with touchend

Disable links during drag events Javascript

I'm having issues handeling some drag events... What I'm working on is a draggable control panel, and I want to disable click events during the drag. Is there a way to globally disable click events during the drag? Another issue I've found is that when someone starts the drag over a link or image the you get a psuedo-element drag of the image/link and then the control panel is stuck to the mouse because the original drag event got eat up somewhere.
any help or direction would be nice.
this is what i'm working with
dragElement.mousedown(function(event) {
sticker.css('cursor', 'move');
if ((event.button == 1 && window.event != null) || event.button == 0) {
//second catch here in case user stops drag and re-initiates drag
//without moving away from sticker
document.onselectstart = function() {
return false;
};
startDrag(event);
}
});
$(document).mousemove(function(event) {
handleDrag(event);
});
dragElement.mouseup(function() {
endDrag();
$(document).unbind('mousemove', handleDrag);
});

To the link or image elements, try to prevent their default behavior by original JavaScript
event.preventDefault(); //standard browser
or
event.returnValue=true; //IE
or just a function in jQuery for both
event.preventDefault();