使用“on”事件检测元素外部的点击？

Question

I need to detect clicks outside the element with id 'proplist'. However, I already have an 'on' event function that detects value changes of an input. I tried to access the form-key value from the mouseup event, but I it didn't return any data. How can I get the value of form-key after detecting clicks outside the element?

  $('#plusData').on("blur", "input[id^=form-key]", function(){
    console.log($(this).val());

    $(document).mouseup(function (e) {
        if ($(e.target).closest("#proplist").length === 0 ) {
            console.log($(this).val());
        }
    });

});

html code

    <div id="proplist">
    <div id="plusData">
        <div class="form-group form-group-extraData" id="box" style="width: 100%;">
            <input type="text" class="form-control" id="form-key1" name="key" >
            <input type="text" class="form-control" id="form-content1" name="content" >
            <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()">
        </div>
    </div>
</div>

Answer 1

As far as I know, you can't really modify the outside element from a css selector.

But you can just add another event listener for the parent of this element, or add such wrapper for that. CSS pseudo selector :has() maybe a way out for this.

For example, I made 2 wrappers in the snippet below, one has a child #proplist and the other one doesn't.

 $('.wrapper:has(#proplist)').click(e => { console.log(e.target.classList.value); e.target.classList.toggle('red'); });

 .wrapper { background: none; height: 100px; border: 1px solid #000; }.wrapper.red { background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div id="proplist"> <div id="plusData"> <div class="form-group form-group-extraData" id="box" style="width: 100%;"> <input type="text" class="form-control" id="form-key1" name="key" > <input type="text" class="form-control" id="form-content1" name="content" > <input type="button" class="btn btn-alt-primary" value="+" onclick="addTextbox()"> </div> </div> </div> </div> <div class="wrapper"> <h1>Not having proplist</h1> </div>