Question

我正在构建Chrome扩展程序。它的弹出窗口中有一个徽标横幅，我想将其用作扩展程序的暂停/激活按钮。此横幅的背景颜色指示该扩展名当前是否处于活动状态。

横幅是一个ID为“ pophead”的div，我要在其上放置3个事件监听器。

'mouseover'=>检查扩展名当前是否处于活动状态，并将div的内容更改为暂停或激活
'mouseleave'=>显示正确的pophead标语-主动或被动
'click'=>检查扩展程序当前是否处于活动状态，并相应地更改chrome.storage中的变量

问题：我不能让三个人一起工作。单独或一次2个都可以正常工作，回调可以完成他们需要做的事，但是当所有3个都应用时...

'click'回调永远不会触发
'mouseleave'似乎仅在鼠标移至div的顶部或底部而不是div的左侧或右侧时才起作用
当回调仅是警报或console.logs时起作用，而当它们需要做某事时则不起作用

我不知所措...感谢您的帮助！

popup.html

@include('layouts.students.header')
<meta name="csrf-token" content="{{csrf_token()}}">
<body>
<div class="col">
<p class="text-right" style="font-size: 18px;">
<i class="fa fa-rupee"></i><strong 
class="amount">299</strong>
</p>
</div>
<div class="form-group text-right">
<button class="btn btn-warning btn-block btn-lg 
buy_now">Proceed</button>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('button').click(function(event){
e.preventDefault();
var amount = $('.amount').html();
$.ajax({
url : '{{route('razorpay')}}',
method : 'POST',
dataType : 'jason',
data : {amount :amount * 100},
success : function (Response) {
console.log(Response);
}
});
});
});
</script>
</body>
</html>

controller :
public function dopayment(Request $request)
{
$data = $request->all();
$result = Payment::insert($data);
echo "inserted";
}

popup.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PopUp</title>
    <link rel="stylesheet" href="popup2.css">
</head>

<body>
        <div id="pophead">
            <div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>  
            <div id="tagline" class="shadow"> FOCUS IS A SUPERPOWER! </div>
        </div>

    <script src="popup.js" charset="utf-8"></script>
</body>
</html>

popup.css

document.addEventListener('DOMContentLoaded', function () {     
    
    //Eclipser active?
    let active;  // stores if Eclipser is currently active
    chrome.storage.sync.get('eclipser_all', function (result) {
        active = result.eclipser_all;
    });

    //  Pophead versions
    let pophead_active = `
    <div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>  
        <div id="tagline" class="shadow"> FOCUS IS A SUPERPOWER! </div>
    `
    let pophead_passive = `
    <div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>  
        <div id="tagline" class="shadow"> PAUSED </div>
    `
    let pophead_pause = `
    <div><img src="imgs/pause.png" id="logo" class="shadow"></div>  
        <div id="tagline" class="shadow"> PAUSE </div>
    `
    let pophead_activate = `
    <div><img src="imgs/play.png" id="logo" class="shadow"></div>   
        <div id="tagline" class="shadow"> ACTIVATE! </div>
    `
    
    // Pophead events
    const pophead = document.getElementById('pophead');
    setPophead(); // display correct pophead on load

    pophead.addEventListener('mouseover', () => {
        if(active){
                pophead.innerHTML=pophead_pause;
                pophead.style.backgroundColor='var(--dark_green)'
            }else if(!active){
                pophead.innerHTML=pophead_activate;
            }
    });
    
    pophead.addEventListener('mouseleave', setPophead);
    
    pophead.addEventListener('click',() => {
        alert('clicked');
        chrome.storage.sync.get('eclipser_all', function (result) {
            if(result.eclipser_all == false){
                chrome.storage.sync.set({ 'eclipser_all': true }, ()=>setPophead);
                active=true;
                console.log('Eclipser Activated');
            }else if(result.eclipser_all == true){
                chrome.storage.sync.set({ 'eclipser_all': false }, ()=>setPophead);
                active=false;
                console.log('Eclipser Paused');
            }
            setPophead();
        });
    },false);

    // display correct pophead
    function setPophead(){
        chrome.storage.sync.get('eclipser_all', function (result) {
            if(result.eclipser_all == false){
                pophead.innerHTML=pophead_passive;
                pophead.style.backgroundColor='grey';
            }else{
                pophead.innerHTML=pophead_active;
                pophead.style.backgroundColor='green';
            }
        });
    }
});

JS鼠标动作eventListener（单独，鼠标离开，单击）单独工作，但不能一起工作

0 个答案: