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

Question

所以我正在使用一些需要快速更新的预先存在的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>