Jqueryでのイベント重複について

現在、コンテンツを作成していてわからないところが出て来たので教えて欲しいと思い質問させてもらいました。
ここのサイトのソースコードをもとに自分で勉強していて、ここで書かれているのをjqueryに変更してるのですが、コンテンツがスクロールしません。
デベロッパーツールで確認してみると、このようにマウスをクリックしてスクロールすると重複していることがわかりました。

そこでjqueryでのイベントでの重複処理のことを調べたら.onではなくて.addEventListenerこっちを使うという記事を見たのですが、jqueryでは出来ないのでしょうか？教えて欲しいです。

javascript
1$(funciton()
2{
3    const slider = $('.items');
4    let isDown = false;
5    let startX;
6    let scrollLeft;
7
8    slider.on(
9    {
10        'mousedown': function(e)
11        {
12            isDown = true;
13            slider.addClass('active');
14            startX = e.pageX - slider.offsetLeft;
15            scrollLeft = slider.scrollLeft;
16        },
17        'mouseleave': function()
18        {
19            isDown = false;
20            slider.removeClass('active');
21        },
22        'mouseup': function()
23        {
24            isDown = false;
25            slider.removeClass('active');
26        },
27        'mousemove': function(e)
28        {
29            if(!isDown) 
30            {
31                return;
32            }
33            e.preventDefault();
34            const x = e.pageX - slider.offsetLeft;
35            const walk = (x - startX) * 3; //scroll-fast
36            slider.scrollLeft = scrollLeft - walk;
37            console.log(slider.scrollLeft);
38        }
39    });
40});

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>Page Title</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
9    <script src="main.js"></script>
10</head>
11<body>
12    <!-- horizontal scrollここから -->
13<main class="grid-item main">
14        <div class="items">
15          <div class="item item1"></div>
16          <div class="item item2"></div>
17          <div class="item item3"></div>
18          <div class="item item4"></div>
19          <div class="item item5"></div>
20          <div class="item item6"></div>
21          <div class="item item7"></div>
22          <div class="item item8"></div>
23          <div class="item item9"></div>
24          <div class="item item10"></div>
25        </div>
26        <p>????????Click & Drag <i>powered by Javascript</i></p>
27      </main>
28    <!--horizontal scrollここまで -->
29</body>
30</html>

行動規範の内容に同意します

回答2件

全体的に何をしたいかわかりません
とりあえず以下は直したほうがよいかと

$(funciton()

$(function()

slider.offsetLeft;

slider.offset().left;

scrollLeft = slider.scrollLeft;

？？メソッドを拾ってる？

投稿2018/12/21 02:12

編集2018/12/21 02:13

yambejp

総合スコア114777

hiroshi3324

2018/12/21 06:59

$(function()のところは記載ミスで、直しました。具体的にはマウスでクリックしたままで移動するとitemのところがスクロールするというものを作成しようと思っています。以下修正しましたが、うまく動きません。 $(function(){ const slider = $('.items'); let isDown = false; let startX; slider.on( { 'mousedown': function(e) { isDown = true; slider.addClass('active'); startX = e.pageX - slider.offset().left; }, 'mouseleave': function() { isDown = false; slider.removeClass('active'); }, 'mouseup': function() { isDown = false; slider.removeClass('active'); }, 'mousemove': function(e) { if(!isDown) { return; } e.preventDefault(); const x = e.pageX - slider.offset().left; const walk = (x - startX) * 3; slider.startX = startX - walk; console.log(slider); } }); });

行動規範の内容に同意します

jQueryなら、mousemoveでスクロールさせる部分はscrollLeft(distance)でできると思います。

JavaScript
1$(function(){
2  let isDown = false;
3  let startX;
4  let scrollLeft;
5
6  $('.items').on('mousedown', function(e) {
7    isDown = true;
8    $(this).addClass('active');
9    startX = e.pageX - $(this).offset().left;
10    scrollLeft = $(this).scrollLeft();
11  }).on('mouseleave, mouseup', function() {
12    isDown = false;
13    $(this).removeClass('active');
14  }).on('mousemove', function(e) {
15    if(!isDown) return;
16    e.preventDefault();
17    const x = e.pageX - $(this).offset().left;
18    const walk = (x - startX) * 3; //scroll-fast
19    $(this).scrollLeft(scrollLeft - walk);
20    console.log(walk);
21  })
22})
23