Как отключить входной элемент, находящийся внутри div?

Question

Это может быть легко, но я не могу ничего найти, чтобы найти способ, когда я нахожусь за пределами текстового поля, чтобы предупредить что-то в javascript, но когда я нажимаю внутри текста, ничего не произойдет. Входной текст находится внутри элемента div.

Итак, давайте предположим, что мой HTML, как ниже:

<div id="myone" onclick="javascript: myfunc();"> 
<input type="text" id="myInput"></input> 
</div> 

function myfunc() 
{ 
alert('ok'); 
} 

Как изменить это?

Большое вам спасибо!

Answer 1

Вы используете это состояние. e.target !== this

Часто бывает полезно сравнить event.target на это для того, чтобы определить, является ли событие обрабатывается из-за кипящие события. Это свойство очень полезно в делегировании событий, когда события пузыря.

Используйте его внутри функции мыши, как это и увидеть его в действии:

$('.divover').on('click', function(e) { 
 
    if (e.target !== this) return; 
 
    thefunc(); 
 
}); 
 

 

 
var thefunc = function myfunc() { 
 
    alert('ok'); 
 
}

.divover { 
 
    padding: 20px; 
 
    background: yellow; 
 
} 
 
span { 
 
    background: blue; 
 
    color: white; 
 
    padding: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='divover'>somelabel: 
 
    <span><input type="text" class="as" name="forename"></span> 
 
</div>

Answer 2

ли это:

var div = document.getElementById('myone'); 
var funct = function(){ 
    var input = div.querySelector("#myInput"); 
    return false; 
}; 

div.onclick = funct; 

Answer 3

Это будет работать, если вы сделаете это тщательно.

<div id="myone" onclick="javascript: myfunc();"> 
//your stuff in the clickable division. 
</div> 

<div style="position:absolute;"> 
<!--Adjust this division in such a way that, it comes inside your clickable division--><input  
type="text" id="myInput"></input> 
</div> 



//Your script function/code here 
function myfunc() 
{ 
alert('ok'); 
}