nastya97core,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.container {
height: 300px;
width: 500px;
border: 1px solid #FF0000
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var startX = 0;
var endX = 0;
var mouse;
var txt = '';
$('.container').on('touchstart mousedown', function(e) {
mouse = "down";
startX = e.clientX;
$('p').html(txt += '<br>коснулись ' + startX + '<br>');
function move(e) {
$('p').html(txt += ", при движении " + e.clientX);
}
function end(e)
{
$(document).off('touchmove mousemove', move);
endX = e.clientX;
$('p').html(txt += "<br>отпустили " + endX);
mouse = "up";
}
$(document).on('touchmove mousemove', move)
$(document).one('touchend mouseup', end)
})
});
</script>
</head>
<body>
<div class="container"></div>
<p></p>
</body>
</html>