Javascript 使用.prop（）禁用/启用内联事件

因此，我正在使用一些先前存在的js，它们需要快速更新。最终，我的计划是把它改写成不那么难看的东西，但与此同时，我必须在现有的范围内努力工作（时间紧迫）

我在这里看到了一些相关的线索，但似乎没有什么真正说明我在处理什么，作为一个js业余爱好者，一些解释可能已经超出了我的头脑。提前感谢您为此提供的任何帮助；我知道也有类似的问题，但答案要么对我来说不太合理，要么就是在申请时根本不起作用

基本要点是：

我有一个元素，它应用了onmouseover和onmouseout内联事件。我需要在单击元素时禁用onmouseover事件，然后在用户单击元素外部时重新启用它。事实证明，这比我想象的更令人头痛，所以我现在不确定这是否合理，但希望这里的好人能让我改邪归正

JS：

function toggle_visibility(elem, id_one, id_two) {
        var e = document.getElementById(id_one);
        var f = document.getElementById(id_two);

        var $this = $(e);
        if ($this.data('mouseover') === true) {
          return;
        }

        $this.data('mouseover', true);
        if ($(e).hasClass('js-hide')) {
            $('[id^="group"]').addClass('js-hide').removeClass('js-show'); 
            $('.path-active').removeClass('path-active');          
            $(f).addClass('path-active');
            $(e).addClass('js-show');
            $(e).removeClass('js-hide');
        } 

    }

    function toggle_hidden(elem, id_one, id_two) {
        var e = document.getElementById(id_one);
        var f = document.getElementById(id_two);
        var $this = $(e);
        $this.data('mouseover', false);
        var timeOut = $this.data('timeout');

        if (typeof(timeOut) !== "undefined") {
          clearTimeout(timeOut);
        }

        function timeoutFn(){             

            if ($(e).hasClass('ishover')) {
                timeOut = setTimeout(timeoutFn, 2000);
                $this.data('timeout', timeOut);
                return;
            } else if ($(g).data('clicked')) {
                clearTimeout(timeOut);
            }

            if ($(e).hasClass('js-show')) {
                $(e).addClass('js-hide');               
                $(e).removeClass('js-show');
            }
            if ($(f).hasClass('path-active')) {
                $(f).removeClass('path-active');
            }
         }

        var g = '[id^="overlay"]';

        var container = $(g);

        $(g).on('click', function() {
            $(g).data('clicked', true);
        });

        if ($(g).data('clicked')) {
            clearTimeout(timeOut);
        } else {
            timeOut = setTimeout(timeoutFn, 2000);
            $this.data('timeout', timeOut);
        }

    }

    function click_visibility(elem, id_one, id_two) {
        var g = '[id^="overlay"]';

        $(g).on('click', function() {                      
            $(g).prop('onmouseover', null);     
            $(g).data('clicked', true);
        });

        if ($(g).data('clicked')) {      
            $(document).on('click', function() {            
                $(g).prop('onmouseover', true);
                $(g).data('clicked', false);
                $(f).removeClass('path-active');
            });
        }

HTML示例：

<g id="overlay-north-america" onclick="click_visibility(this, 'groupOne', 'north-america')" onmouseover="toggle_visibility(this, 'groupOne', 'north-america')" onmouseout="toggle_hidden(this, 'groupOne', 'north-america')">
    <g>
        <polygon class="st1" points="349.4,-0.1 347.8,4.9 373.4,4.8 363.8,11.3 347.8,22.3 349.4,25.5 344.6,27 344.6,35.2 335,38.4 
            335,43.3 315.7,43.3 317.6,46.1 303.2,46.4 299.8,51.1 291.7,51 291.7,60.7 279.1,60.7 280.6,55.9 274.3,55.9 274.3,46.1 
            269.5,44.8 274.3,41.3 274.3,30.4 280,29 279.1,19.1 256.5,17.4 255,14.5 248.3,12.7 250.2,17.2 238.7,17.4 238.7,24.1 
            243.5,24.1 243.5,30.4 248.3,29 248.3,38.5 255,38.5 253.2,43.3 259.8,43.3 256.5,46.3 248.3,46.4 250.2,51 243.5,52.8 
            243.5,75.3 248.3,77.2 248.3,104 242.1,104 240.6,99.4 235.8,99.4 232.4,104 229.1,107.4 200.2,108.9 200.2,118.4 197.3,118.5 
            197.3,115.5 189.2,113.6 189.2,118.4 185.8,118.5 185.8,128 181,128.1 181,137.8 165.1,137.7 168.4,142.6 171.4,147.5 
            161.7,155.5 161.7,165.2 166.5,170 165.1,178.1 176.2,178 176.2,184.4 185.8,183 185.8,187.8 195.4,187.9 195.4,192.6 
            173.2,190.7 173.2,185.8 168.4,185.9 166.5,189.3 160.3,190.7 160.3,187.8 163.6,181.1 160.3,181.1 158.8,174.8 145.9,176.1 
            149.2,169.7 150.5,152.3 137.7,152.3 136.3,156.9 118.4,157 118.4,160.4 112.1,161.8 113.6,187.8 125.2,187.8 125.2,176.4 
            142.5,176.4 142.5,181.1 137.7,181.1 137.7,192.6 132.9,194.1 145.9,197.3 147.3,214.7 160.3,216.7 155.4,224.4 144.4,224.4 
            136.1,214.9 134.7,206.9 120.3,205.3 120.3,200.3 101,202.1 101,195.5 91.4,197.5 91.4,189.3 86.6,189.3 86.6,174.6 83.1,171.5 
            78.5,176.3 77,171.6 65.5,171.6 67.4,161.8 62.6,160.4 62.6,139.5 52.9,139.5 54.4,118.5 67.4,102.6 77,102.5 77,94.6 62.6,84.9 
            62.6,76.9 67.4,76.9 68.8,65.5 64,65.5 60.7,62.5 44.9,60.6 46.2,64.3 33.7,65.7 33.7,70.2 20.7,70.3 15.9,75.2 -1.3,75.3 0,72.1 
            14.4,70.3 19.2,67.4 4.8,64.1 6.2,57.9 12.6,57.8 15.9,46.4 22.2,48.3 25.4,43.5 36.6,44.9 36.6,38.4 43.3,38.4 43.3,33.7 
            55.9,35.2 59.2,27 88.1,27 84.7,33.7 121.6,33.8 134.7,20.5 141,19.3 141,27 149.2,24.1 149.2,17.4 155.4,19.3 154,12.7 
            195.4,14.5 195.4,7.9 226.2,9.5 226.2,4.8 312.8,4.8 312.8,-0.1       "></polygon>
        <polygon class="st1" points="335,43.3 336.8,51.1 348,51 354.2,44.8      "></polygon>
    </g>
</g>


<div class="js-show" id="groupOne" onmouseout="$(this).removeClass('ishover')" onmouseover="$(this).addClass('ishover')">
<h5 class="divider divider-dark divider-sm">Jobs in North America</h5>

<ul class="list-unstyled spacing-none">
    <li><a class="text-hot no-decoration currentURL" href="#">List item 1</a></li>
    <li><a class="text-hot no-decoration currentURL" href="#">List item 2</a></li>
    <li><a class="text-hot no-decoration currentURL" href="#">List item 3</a></li>
</ul>
<a class="padding-md-left padding-md-top text-reduced-md text-hot uppercase" href="#">... all jobs in north america</a></div>

北美的工作

你期望得到什么

$（g）.prop（'onmouseover'，true）要做什么？您需要将其设置为要执行的Javascript字符串。另外，这应该是
.attr
而不是
.prop
，但是jQuery可能会帮你解决这个问题。谢谢你的提示！我今天在研究这个问题时遇到了.prop，所以我承认我对它没有很好的理解（以为它只是重新启用了指定的事件）。Afk在目前，但会尝试你的建议和更新的问题，一旦我有机会。