MouseDown / MouseUp /Click

WEB TMS WEB Core
1

I have a button that is displayed as an image on the webpage.
With Mousedown over the image start a timer incrementing of a value and with MouseUp stop it.
As long as I do not move the Mouse it works, as soon as you move the mouse, I no longer receive a MouseUp event.

The other question is how I can switch off the drag and drop of an image on the webpage so that this hover effect does not occur.

TMS

2

I could not reproduce the issue with OnMouseUp.

To avoid this drag, set a style attribute

webImageControl.ElementHandle.style.setProperty('pointer-events','none');

3

I made two small projects where it becomes visible that the dragmode in VCL differently to the dragmode in WebCore. First make a mouse down to the graphic, then move the mouse, then mouse up.

the green button in VCL Result (mousedown, mouseup, Click)
the red button in VCL Result (mousedown, Startdrag ... EndDrag)

There is no difference in the WebCore version.

I made an addition to the TMS_Test project:

procedure TForm10.WebFormCreate(Sender: TObject);
begin
  WebImageControl1.ElementHandle.style.setProperty('pointer-events','none');
end;

now nothing happens with the green image (no mouse down etc.)

TMS_VCL_Test.zip (35.7 KB)

5

Disable start browser dragging of the image with code like:

procedure TForm10.WebFormCreate(Sender: TObject);
var
  el: TJSElement;
begin
  el := WebImageControl1.ElementHandle;
  asm
  el.ondragstart = function() { return false; };
  end;
end;
6

Thank you so works.
But I still have to implement the StartDrag to stop the incrementing.

But now there is a new problem.

If I run the Page on a PC (Firefox etc.) my example works correctly.
When I run it on a smartphone browser, become two MouseDown / Up triggered
or when I hold the button for a long time, the popup opens. (mouse right)
Is there a solution for that too?
So only once mouse down and up and no mouse right (popup)

Test 1.zip (12.8 KB)

I found switching off the popup menu.

el.oncontextmenu = function() { return false; };

the double mouse trigger (down..up..down..up) still comes

testnews:
on Chrome and Opera Browser the solution works (ContextMenu)
on Safari and firefox the solution does not work --> the ContextMenu is displayd

7

Did you try to do the same for the el.touchstart event?

8

have now redirected the following functions

    asm
      el.oncontextmenu = function() { return false; };
      el.ondragstart   = function() { return false; };
      el.ontouchstart  = function() { return false; };
      el.ontouchmove   = function() { return false; };
      el.ontouchend    = function() { return false; };
      el.ontouchcancel = function() { return false; };
    end;

now it's going as I would like
thank's for the Tipps