Exploring the intricacies of the problem, I found it valuable to delve into the complexities and unique cases that arise in any potential solution.

Challenges to Consider:

1 - Variations in touch event implementations across different devices and browsers. What may work on one device could fail on another due to the diverse ways touch-screen interactions are handled across platforms. The disparities are evident from resources like patrickhlauke which showcase the discrepancies in touch-screen functionality.

2 - Lack of indication in event handlers about their initial triggers. It's true that the event object lacks distinction between mouse events caused by a mouse interaction versus those triggered by a touch gesture, leading to ambiguity in tracking event origins.

3 - Temporal limitations of proposed solutions for universal applicability as current W3C Recommendations provide insufficient guidance on handling touch/click events (https://www.w3.org/TR/touch-events/), perpetuating browser-specific implementations. With no recent updates to the Touch Events standards document in 5 years (https://www.w3.org/standards/history/touch-events), a sustainable fix is not imminent.

4 - Dependence on timeouts in absence of defined transition time from touch event to mouse event underscores the necessity for timeout mechanisms despite uncertainties in the spec, complicating resolution strategies.

Proposed Future Approach:

Future direction might pivot towards utilizing Pointer Events over traditional mouse/touch events for enhanced data accessibility through pointerType (https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events), yet hindered by incongruities in cross-browser support (https://caniuse.com/#search=pointer%20events).

Current Mitigation Strategies:

Given:

1. The challenge of detecting touchscreen presence ()
2. Persisting non-touch events on touch-enabled screens

Relying solely on intrinsic mouse event attributes becomes imperative in determining event sources amid inherent complexity. Supplementing browser oversight with personalized event tracking during simultaneous touch and mouse actions emerges as a pragmatic workaround.

Reviewing insights from patrickhlauke, certain patterns emerge:

1. mouseover consistently precedes subsequent click events mousedown, mouseup, and click - adhering to specified orders detailed in W3C guidelines: https://www.w3.org/TR/touch-events/.
2. For most setups, mouseover antecedes either pointerover, MSPointerOver, or touchstart events.
3. Devices initiating event sequences with mouseover must be disregarded as inferring touch event precedence necessitates prior touch event registration.

Incorporating flags during initial touch events and removing them post-click stages can streamline event source identification, albeit vulnerable in select scenarios:

1. If event.preventDefault obstructs tactile event progression, persisting flagged states could misattribute future clicks as touch-induced.
2. Displacement of target elements mid-event introduces ambiguities per W3C assertions.

"If the contents of the document have changed during processing of the touch events, then the user agent may dispatch the mouse events to a different target than the touch events."

This ensuing reliance on timeouts stems from challenges delineated in identifying activity disruptions introduced by touch projections and dynamic element relocations during concurrent touch/mouse engagements.

As a fascinating dilemma unfolds, forthcoming alterations will feature tailored code recommendations addressing these intricacies. In the interim, suggestions from @ibowankenobi or @Manuel Otto offer pragmatic avenues for conceptual deliberation.

Here's what we know:

If the user doesn't use a mouse:

• The mouseover event is triggered directly (within 800ms) after either a touchend or a touchstart (if the user tapped and held).
• The position of the mouseover event matches the position of the touchstart/touchend events.

If the user uses a mouse/pen:

• The mouseover event is fired before the touch events, and even if not, the position of the mouseover will not match the touch events' position 99% of the time.

Considering these points, I have created a snippet that adds a flag triggeredByTouch = true to the event if the specified conditions are met. You can also add this behavior to other mouse events or set kill = true to completely discard mouse events triggered by touch.

(function (target){
    var keep_ms = 1000 // how long to keep the touchevents
    var kill = false // whether to kill any mouse events triggered by touch
    var touchpoints = []

    function registerTouch(e){
        var touch = e.touches[0] || e.changedTouches[0]
        var point = {x:touch.pageX,y:touch.pageY}
        touchpoints.push(point)
        setTimeout(function (){
            // remove touchpoint from list after keep_ms
            touchpoints.splice(touchpoints.indexOf(point),1)
        },keep_ms)
    }

    function handleMouseEvent(e){
        for(var i in touchpoints){
            //check if mouseevent's position is (almost) identical to any previously registered touch events' positions
            if(Math.abs(touchpoints[i].x-e.pageX)<2 && Math.abs(touchpoints[i].y-e.pageY)<2){
                //set flag on event
                e.triggeredByTouch = true
                //if wanted, kill the event
                if(kill){
                    e.cancel = true
                    e.returnValue = false
                    e.cancelBubble = true
                    e.preventDefault()
                    e.stopPropagation()
                }
                return
            }
        }
    }

    target.addEventListener('touchstart',registerTouch,true)
    target.addEventListener('touchend',registerTouch,true)

    // which mouse events to monitor
    target.addEventListener('mouseover',handleMouseEvent,true)
    //target.addEventListener('click',handleMouseEvent,true) - uncomment or add others if wanted
})(document)

Test it out:

function onMouseOver(e){
  console.log('triggered by touch:',e.triggeredByTouch ? 'yes' : 'no')
}

(function (target){
var keep_ms = 1000 // how long to keep the touchevents
var kill = false // whether to kill any mouse events triggered by touch
var touchpoints = []

function registerTouch(e){
var touch = e.touches[0] || e.changedTouches[0]
var point = {x:touch.pageX,y:touch.pageY}
touchpoints.push(point)
setTimeout(function (){
// remove touchpoint from list after keep_ms
touchpoints.splice(touchpoints.indexOf(point),1)
},keep_ms)
}

function handleMouseEvent(e){
for(var i in touchpoints){
//check if mouseevent's position is (almost) identical to any previously registered touch events' positions
if(Math.abs(touchpoints[i].x-e.pageX)<2 && Math.abs(touchpoints[i].y-e.pageY)<2){
//set flag on event
e.triggeredByTouch = true
//if wanted, kill the event
if(kill){
e.cancel = true
e.returnValue = false
e.cancelBubble = true
e.preventDefault()
e.stopPropagation()
}
return
}
}
}

target.addEventListener('touchstart',registerTouch,true)
target.addEventListener('touchend',registerTouch,true)

// which mouse events to monitor
target.addEventListener('mouseover',handleMouseEvent,true)
//target.addEventListener('click',handleMouseEvent,true) - uncomment or add others if wanted
})(document)

a{
  font-family: Helvatica, Arial;
  font-size: 21pt;
}

<a href="#" onmouseover="onMouseOver(event)">Click me</a>

Based on information from https://www.html5rocks.com/en/mobile/touchandmouse/
When it comes to a single click, the sequence of events is:

1. touchstart
2. touchmove
3. touchend
4. mouseover
5. mousemove
6. mousedown
7. mouseup
8. click

One approach could be setting a boolean variable isFromTouchEvent = true; in onTouchStart() and then changing it to isFromTouchEvent = false; in onClick(). This way, you can check for this variable inside onMouseOver(). However, keep in mind that we may not receive all these events for the element we are monitoring.

My approach involves utilizing a couple of different strategies, one of which relies on a manual implementation of setTimeout to activate a specific property. While I will delve into this method shortly, it is worth considering the usage of touchstart, touchmove, and touchend events for touch devices, as well as mouseover events for desktop interactions.

In situations where event.preventDefault is called (remember that the event must not be passive for this to function with touchstart), any subsequent mouse calls will be canceled automatically, simplifying the handling process. However, if this behavior does not align with your intentions, an alternative solution can be explored using your preferred DOM manipulation library and element references:

Implementing setTimeout

library.select(elem) //select the desired element
.property("_detectTouch",function(){//establish a _detectTouch method to temporarily set a property on the element
    return function(){
        this._touchDetected = true;
        clearTimeout(this._timeout);
        this._timeout = setTimeout(function(self){
            self._touchDetected = false;//adjust accordingly based on your scenario; for combined touch and desktop support, consider setting it between 300-400ms
        },10000,this);
    }
}).on("click",function(){
    /*perform certain actions*/
}).on("mouseover",function(){
    if (this._touchDetected) {
        /*interaction from a touch-based device*/
    } else {
        /*desktop interaction*/
    }
}).on("touchstart",function(){
    this._detectTouch();//execute the property method defined earlier
    toggleClass(document.body,"lock-scroll",true);//disable scrolling by hiding overflow-y on the body element
}).on("touchmove",function(){
    disableScroll();//if the previous overflow-y adjustment fails, use another method to prevent scroll on iOS
}).on("touchend",function(){
    library.event.preventDefault();//ensure event propagation is halted; note: calling this in touchstart may trigger Chrome warnings (unless explicitly declared non-passive)
    this._detectTouch();
    var touchObj = library.event.targetTouches &&& library.event.targetTouches.length 
        ? library.event.targetTouches[0] 
        : library.event.changedTouches[0];
    if (elem.contains(document.elementFromPoint(touchObj.clientX,touchObj.clientY))) {//verify if the touch remains within the designated element
        this.click();//invoke click action since default has been prevented during touchend
    }
    toggleClass(document.body,"lock-scroll",false);//re-enable scrolling functionality
    enableScroll();//restore scrolling capabilities
})

An alternative technique without relying on setTimeout involves treating mouseover as an opposite of touchstart, and mouseout as counter to touchend. By establishing properties through touch events and detecting them in subsequent mouse events, you can create a seamless transition between touch and desktop interactions:

Implementation without setTimeout

....
.on("mouseover",function(dd,ii){
                    if (this._touchStarted) {//triggered by touch device
                        this._touchStarted = false;
                        return;
                    }
                    /*desktop interaction*/
                })
                .on("mouseout",function(dd,ii){//similar concept as above
                    if(this._touchEnded){
                        this._touchEnded = false;
                        return;
                    }
                })
                .on("touchstart",function(dd,ii){
                    this._touchStarted = true;
                    /*perform specific actions*/
                })
                .on("touchend",function(dd,ii){
                    library.event.preventDefault();//ensure emulated events are suppressed completely at this stage, leveraging attached properties for further control
                    this._touchEnded = true;
                    /*perform additional actions*/
                });

While some details have been omitted for brevity, the core concepts remain intact within these implementations.

One solution is to utilize modernizr for this task! After conducting a test on my local development server, I can confirm that it functions as expected.

if (Modernizr.touch) { 
  console.log('Touch Screen');
} else { 
  console.log('No Touch Screen');
} 

Therefore, beginning with modernizr could be a good starting point.

Pointer Events have gained widespread support. This means we can now utilize pointerenter and examine event.pointerType:

const hoverElement = document.getElementById("hoverableArea")

hoverElement.addEventListener("pointerenter", (event) => {
  if (event.pointerType === "mouse") {
    alert("Hover detected")
  }
})

<div id="hoverableArea">Activate on hover, but not on touch</div>