onTouch event causing problems with gesture scrolling

Question

onTouch event causing problems with gesture scrolling

Currently, I am utilizing the following Javascript code to implement ontouchstart/move/end callbacks on div elements in an iOS web application. The issue I am facing is that when attempting to scroll through the page, it triggers the ontouchstart event and alters the CSS of the div. What I aim for is to have the CSS changes applied only when a user actually selects the item. My knowledge of Javascript is somewhat basic, so any suggestions on how to modify the code to trigger only when an item is selected would be highly appreciated!

Thank you!

TC

Javascript:

function onclickCallback( event ) {

}

function ontouchstartCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchmoveCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchendCallback( event ) {

event.target.className = 'choice_link';

}

HTML:

<div class="choice_link" onclick="onclickCallback(event);" ontouchstart="ontouchstartCallback(event);" ontouchend="ontouchendCallback(event);" ontouchmove="ontouchmoveCallback(event);">
            <a href="javascript:location.href='test.php'">Test</a>
         </div>

javascript ios scroll gestures touch-event

Answer 1

Answer №1

Remember to use the method event.stopPropagation() to halt event bubbling, and also utilize event.preventDefault() to prevent the default handler from executing.

<div id="ctr" class="choice_link">
     <a href="javascript:location.href='test.php'">Test</a>
</div>
<script>
function onTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = 'selected';
}

function onTouchEnd(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = '';
}

var ctr = document.getElementById('ctr');
ctr.addEventListener('touchstart', onTouchStart, false);
ctr.addEventListener('touchend', onTouchEnd, false);
</script>

Answer 2

Remember to use the method event.stopPropagation() to halt event bubbling, and also utilize event.preventDefault() to prevent the default handler from executing.

<div id="ctr" class="choice_link">
     <a href="javascript:location.href='test.php'">Test</a>
</div>
<script>
function onTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = 'selected';
}

function onTouchEnd(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = '';
}

var ctr = document.getElementById('ctr');
ctr.addEventListener('touchstart', onTouchStart, false);
ctr.addEventListener('touchend', onTouchEnd, false);
</script>

Answer 3

Answer №2

Assuming I've grasped your query correctly:

Enhance ontouchstartCallback:

if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];

Substitute the content of ontouchmoveCallback with:

if(event.touches.length < 1) return;
var threshold = 5;
if(event.target.touchdata)
{
    if(Math.abs(event.touches[0].clientX - event.target.touchdata[0]) > threshold
    || Math.abs(event.touches[0].clientY - event.target.touchdata[1]) > threshold)
    {
        event.target.className = 'choice_link';
        event.target.touchdata = false;
    }
}

The purpose of this code:

At the start of a touch event, the X/Y coordinates are linked to the touched DOM element. Then during each movement event, it verifies whether the distance traveled is beyond a specified pixel threshold (set at 5). If it surpasses the threshold, the class reverts early and eliminates the X/Y coordinates as they are no longer necessary.

Answer 4

Assuming I've grasped your query correctly:

Enhance ontouchstartCallback:

if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];

Substitute the content of ontouchmoveCallback with:

if(event.touches.length < 1) return;
var threshold = 5;
if(event.target.touchdata)
{
    if(Math.abs(event.touches[0].clientX - event.target.touchdata[0]) > threshold
    || Math.abs(event.touches[0].clientY - event.target.touchdata[1]) > threshold)
    {
        event.target.className = 'choice_link';
        event.target.touchdata = false;
    }
}

The purpose of this code:

At the start of a touch event, the X/Y coordinates are linked to the touched DOM element. Then during each movement event, it verifies whether the distance traveled is beyond a specified pixel threshold (set at 5). If it surpasses the threshold, the class reverts early and eliminates the X/Y coordinates as they are no longer necessary.

Answer 5

Answer №3

From my understanding, using the onmousemove handler to switch the className back to its default state is a valid approach. The issue you're experiencing with your button state freezing during iPhone scrolling has more to do with how scrolling interacts with page rendering performance than the specific handling of the button state change.

When you attempt to scroll on a webpage, the system locks interactions to ensure smooth scrolling and prevent conflicts. This can result in the appearance of a frozen page content, making it difficult for your button to revert to its default state mid-scroll.

The behavior you're describing can vary depending on how the scroll action is initiated. If the button div receives a touchmove event before the scrolling begins, it may be able to maintain its updated class. Otherwise, the class will likely only update once the scrolling action is completed.

Some JavaScript touch frameworks address this issue by intercepting touch events, preventing default browser behaviors (such as scrolling), and implementing custom scrolling mechanisms.

While I don't have a definitive solution, I hope this explanation sheds some light on the issue you're facing.

Best of luck with resolving the matter. Take care.

Answer 6

From my understanding, using the onmousemove handler to switch the className back to its default state is a valid approach. The issue you're experiencing with your button state freezing during iPhone scrolling has more to do with how scrolling interacts with page rendering performance than the specific handling of the button state change.

When you attempt to scroll on a webpage, the system locks interactions to ensure smooth scrolling and prevent conflicts. This can result in the appearance of a frozen page content, making it difficult for your button to revert to its default state mid-scroll.

The behavior you're describing can vary depending on how the scroll action is initiated. If the button div receives a touchmove event before the scrolling begins, it may be able to maintain its updated class. Otherwise, the class will likely only update once the scrolling action is completed.

Some JavaScript touch frameworks address this issue by intercepting touch events, preventing default browser behaviors (such as scrolling), and implementing custom scrolling mechanisms.

While I don't have a definitive solution, I hope this explanation sheds some light on the issue you're facing.

Best of luck with resolving the matter. Take care.

onTouch event causing problems with gesture scrolling

Answer №1

Answer №2

Answer №3

Similar questions

Tips for testing a function that calls other functions during unit testing

Obtaining a string value from a parallel array

Displaying and Concealing Divisions

Load the iframe element only when the specified class becomes visible within the container div, without relying on jQuery

Python Scrapy: Extracting live data from dynamic websites

Why is it that one function does not hold off on execution until Promise.all() is resolved in another function?

Improving the efficiency of AES decryption in Node.js

Submission of the form was cancelled, causing a loop to occur

Exploring jQuery functionalities for dynamic selector input

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

Learn how to display only certain elements when triggered by the click of another

What is the best way to verify the API response in YAML format and ensure that it is neither JSON nor Plain Text using JavaScript?

Mongoose has a tendency to duplicate the mongodb collection within a single instance

Switch out all content located after the final character in the URL

What is the best way to set up a function to automatically execute on a specific date and time

Is there a way to create an internal link to another HTML templating engine page within Express.js?

What could be causing this Angular controller to throw the error message "Error: Unknown provider: nProvider <- n"?

Interactive section for user input

experiencing a fault in the Magento platform

Creating a sliding bottom border effect with CSS when clicked