JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<div></div>

CSS

li {
    cursor:pointer
}
div {
    width: 100px;
    height: 50px;
    border: 1px solid black;
    padding: 30px 0 0 70px; 
}

JavaScript

// guarda se o acesso é via mobile ou n
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
// define o evento a partir da variavel q testa se é mobile ou n
var clickEvent = (isMobile) ? 'touchstart' : 'dblclick' ;

// executa a function q define o comportamento a partir do evento disparado
$(document).on(clickEvent, 'li', function(){
	nextEvent(isMobile, $(this));
});
// function responsavel por tratar o comportamento a partir
// do tipo de dispositivo
function nextEvent(isMobile, targetElem) {
	// quando for mobile ios/android
	if(isMobile){
		 //comportamento para o evento de touchend
	    $(this).on('touchend', function(){
	        // chama a function que abre o próximo nivel da linha clicada
	    	doSomething(targetElem);
	    	// remove os handlers (callbacks) atrelados ao evento de touchend
	        $(this).off('touchend');
	    });
	    // comportamento para quando não clica mas só arrasta 
	    $(this).on('touchmove', function(){
	    	// remove os handlers (callbacks) atrelados ao evento de touchend
	        $(this).off('touchend');
	    });
	} else {
		// quando não é mobile, não trata eventos de touch e chama a function diretoma
		doSomething(targetElem);
	}
        
}

// faz o q vc quizer aqui...
function doSomething(targetElem){

    $('div').html($(targetElem).html());

}