Dragging on Dynamic Panel Fires onClick Event

I have created a mobile screen with several list items as dynamic panels. These list items are containers that need to expand/collapse when tapped to show/hide their configuration options. The list also needs to be scrollable vertically.

Here’s the problem: Swiping up and down to scroll the list on top of the items fires the onClick events which expands/collapses the items. This is a major blocker for testing as users cannot even scroll the list up and down without unexpectedly expanding/collapsing the items. I need drags to register as drags and taps to register as taps. This occurs on:

  • XPS 15 (both mouse click & drag touch simulation and touchscreen) running Chrome 78.0.3904.70 on Windows 10
  • XPS 15 (both mouse click & drag touch simulation and touchscreen) running FireFox 70.0 on Windows 10
  • XPS 15 (both mouse click & drag touch simulation and touchscreen) running Edge 44.17763.771.0 on Windows 10
  • OnePlus 6T running Chrome for Android

Here is the file: Timer Configuration Flow.rp (887.0 KB)

The issue occurs on the “Bell Configuration” page. Try adding more bells via the + button and then see what I’m talking about.

Hi!

That’s sounds annoying: seems like Axure should cancel the OnClick once you start scrolling. Here’s a workaround.

Pseudocode:

On MouseButtonDown
  set variable curScroll equal to the window's current scroll value

On Click or Tap
  if variable curScroll equals the window's current scroll value
    -- do whatever you want to do on tap

Basically, when your finger goes down, it saves the window’s current scroll value, so we can test if scrolling has happened between the finger starting the press and ending the press. If no scroll has happend, then execute whatever tap is supposed to do.

You could also allow a small threshold of scrolling so the tap still happens if they accidentally scrolled 2 pixels during the tap. E.g.:

On Click or Tap
   if (value) Math.abs(curScroll - window's scroll) is less than 3
     -- do whatever

Math.abs() returns a positive number if the expression inside it is negative.

I updated the “Ending Bell” button in your file. Note that I didn’t test it on a phone. Note that you can reuse the curScroll global variable for all of your buttons.

Timer Configuration Flow.rp (888.0 KB)

I am amazed!

This solution works perfectly. I would never have come up with this on my own. Thank you so much! I’m going to report this because it seems that this functionality should exist by default.

Thanks again!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.