Blazor组件中@ontouchenter、@ontouchleave事件不触发及C#动态更新元素位置问题

@ontouchenter/@ontouchleave 无法触发的原因 #

• 这两个事件是Blazor在.NET 6+ 版本原生支持的绑定项，不需要任何额外配置就能正常绑定，框架层面不存在支持问题。
• 事件不触发是浏览器原生行为导致的，和Blazor无关：
  • 现代移动端浏览器的触摸事件流以touchstart、touchmove、touchend为核心，touchenter、touchleave本身是早期WebKit的非标准实现，不会在跨元素拖拽的场景下按桌面端鼠标事件的逻辑触发、冒泡。
  • 你给拖拽元素加的draggable="true"属性，会让元素进入HTML5原生拖拽的独立事件链路，触摸交互下原生拖拽链路和触摸事件链路完全隔离，绑在目标容器上的进入/离开触摸事件自然永远不会被触发。而且移动端本身对HTML5原生拖拽的支持就非常差，触摸拖放场景下完全不需要给元素加draggable="true"属性，去掉这个属性反而能让触摸事件的触发更顺畅。
• 实用替代方案：不要依赖这两个事件判断拖拽命中区域，直接在全局touchmove事件中通过坐标匹配对应的拖放目标即可，这也是目前所有成熟Blazor触摸拖放方案的通用实现逻辑。

通过C#动态控制元素位置的实现 #

• 完全可以实现，触摸场景下本来就不需要依赖HTML5原生拖拽的自动位置跟随，手动控制定位反而体验更可控：
  1. 给拖拽元素设置脱离文档流的定位（position: absolute），直接通过C#字段绑定left、top的坐标值。
  2. 在@ontouchstart事件中记录手指触摸点和元素左上角的偏移量，在@ontouchmove事件中从TouchEventArgs读取最新的触摸坐标，减去之前的偏移量后直接更新C#的坐标字段，Blazor会自动将新值同步到DOM样式上，实现元素跟随手指移动的效果。
  3. 记得保留元素上的touch-action: none样式，否则移动端浏览器会优先拦截触摸事件触发页面滚动，导致touchmove事件无法连续触发。

最小可运行的拖拽元素核心实现参考：

<div 
     style="position: absolute; left:@_posX px; top:@_posY px;
            cursor: move; background-color: cornflowerblue;
            touch-action: none; user-select: none;
            min-height: 100px; min-width: 100px"
     @ontouchstart="HandleTouchStart"
     @ontouchmove="HandleTouchMove">
    DragMe
</div>

@code {
    private double _posX = 0;
    private double _posY = 0;
    private double _offsetX;
    private double _offsetY;

    private void HandleTouchStart(TouchEventArgs e)
    {
        var touchPoint = e.ChangedTouches[0];
        // 计算偏移量，避免拖拽时元素位置跳变
        _offsetX = touchPoint.ClientX - _posX;
        _offsetY = touchPoint.ClientY - _posY;
    }

    private void HandleTouchMove(TouchEventArgs e)
    {
        var touchPoint = e.ChangedTouches[0];
        // 直接更新坐标即可，Blazor自动同步DOM样式
        _posX = touchPoint.ClientX - _offsetX;
        _posY = touchPoint.ClientY - _offsetY;
    }
}

内容的提问来源于stack exchange，提问作者Michael Østerberg Jakobsen