# JS 滑鼠Event

## 相關函式
| 事件名 | 是否冒泡 |
|:----- |:-------- |
| click | 是 |
| dblclick | 是 |
| mousedown | 是 |
| mouseup | 是 |
| mouseover | 是 |
| mouseout | 是 |
| mousemove | 是 |

---
## 範例
:::spoiler **click event - block**
CSS

<style>
    div.parent_block{
        background-color: red;
        padding: 20px;
    }
    div.outer_block{
        background-color: orange;
        padding: 20px;
    }
    div.inner_block{
        background-color: black;
        color: white;
    }
</style>

HTML

<div class="parent_block">
    這是紅色區域
    <div class="outer_block">
        這是橘色區域
        <div class="inner_block">
            這是黑色區域
        </div>
    </div>
</div>

JS

<script>
    let div_parent_block = document.getElementsByClassName("parent_block")[0];
    div_parent_block.addEventListener("click", function(e){
        //e.stopPropagation();
        alert("點擊紅色區域");
    });

    let div_outer_block = document.getElementsByClassName("outer_block")[0];
    div_outer_block.addEventListener("click", function(e){
        e.stopPropagation();
        alert("點擊橘色區域");
    });

    let div_inner_block = document.getElementsByClassName("inner_block")[0];
    div_inner_block.addEventListener("click", function(e){
        //e.stopPropagation();
        alert("點擊黑色區域");
    });
</script>

:::
* 說明：黑色區域沒有使用 **停止事件冒泡函式** ，所以當點擊完黑色區塊、顯示alert後，會繼續漫延至上層，跳出橘色區塊的alert。
* Demo：

---
:::spoiler **click event - lightbox**
CSS

<style>
    button{
        cursor: pointer;
    }
    #lightbox{
        background-color: hsla(0, 0%, 0%, .5);
        width: 100%;
        height: 100vh;

        position: fixed;
        top: 0;
        left: 0;
    }
    .none{
        display: none;
    }
    #lightbox > article{
        background-color: white;
        width: 90%;
        max-width: 800px;
        border-radius: 10px;
        box-shadow: 0 0 10px #ddd;
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

HTML

<button type="button" class="btn_modal">開啟 Modal 彈跳視窗</button>

<div id="lightbox" class="none">
    <article>
        <h1>這是 Modal 裡的標題</h1>
        <p>這是 Modal 段落</p>
        <button type="button" class="btn_modal_close">關閉</button>
    </article>
</div>

JS

<script>
    let lightbox_el = document.getElementById("lightbox");

    let btn_modal = document.getElementsByClassName("btn_modal")[0];
    btn_modal.addEventListener("click", function(){
        lightbox_el.classList.remove("none");
    });

    let btn_modal_close = document.getElementsByClassName("btn_modal_close")[0];
    btn_modal_close.addEventListener("click", function(){
        lightbox_el.classList.add("none");
    });
    lightbox_el.addEventListener("click", function(){
        this.classList.add("none");
    }); 
    lightbox_el.querySelector("article").addEventListener("click", function(e){
        e.stopPropagation();
    });
    </script>

:::
* 說明：在article層加上 **停止事件冒泡函式**，則點擊 lightbox 中的白色區域，就不會關掉 modal。
* Demo：

---
:::spoiler **click event - remove element**
HTML

<ul class="list">
    <li>
        <button type="button" class="del">刪除</button>
        這是文字1
    </li>
    <li>
        <button type="button" class="del">刪除</button>
        這是文字2
    </li>
</ul>

JS

<script>
    let all_del = document.getElementsByClassName("del");
    
    for(let i = 0; i < all_del.length; i++) {
        console.log(i);
        all_del[i].addEventListener("click", function() {
            this.disabled = true;

            let closest_li = this.closest("li");
            closest_li.classList.add("-remove");

            setTimeout(function() {
                closest_li.remove();
            }, 1000);
        });
    }
</script>

:::
* 說明：
* `this.disabled = true` 用以將del元素禁用，無法被再次點擊
* `closest()` 用以找到最近的 `li` 父元素
* `setTimeout()` 用以設置 `li` 在1000毫秒後移除
* Demo：

---
:::spoiler **mouse event - img after mouse**
CSS

<style>
    html {
        /* cursor: none; */
    }
    #img {
        position: fixed;
        width: 20px;
    }
</style>

HTML

<img src="https://alldata.sgp1.digitaloceanspaces.com/images/icon_animate.gif" id="img">

JS

<script>
    let the_img = document.getElementById("img");
    document.addEventListener("mousemove", function(e){
        // console.log(e.pageX);
        // console.log(e.pageY);
        // console.log(window.scrollY);
            
        the_img.style.left = e.pageX + 10 + "px";
        the_img.style.top = e.pageY - window.scrollY + 10 + "px";
    });
</script>

:::
* 說明：
* `e.pageX` 代表滑鼠距離頁面最左側的距離
* `e.pageY` 代表滑鼠距離頁面最上方的距離
* `window.scrollY` 代表垂直方向滑動的距離
* Demo：

###### tags: `frontend` `jsnote` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)