点击事件没有被触发

问题描述:

我希望用户点击它时选择整个输入框。点击事件没有被触发

在我的情况下,输入框是:

 <label for="bla">My checkbox</label> 
     <input type="input" id="bla" name="check" value="checked" /> 

要做到这一点,我写了下面的JS:

function SelectAll(bar){ 
    bar.focus(); 
    bar.select(); 
    console.log(bar); 
}  
window.onload=function() 
{ 
    var bla=document.getElementById("bla"); 
    bla.addEventListener('click',SelectAll(bla),false);  
}; 

但所有我在控制台中得到的是<input type="input" value="checked" name="check" id="bla"> 一次,无论怎样很多我点击我不能再得到更多。

+0

您是否希望用户在他来到您的页面时被选中您的输入 –

+0

不,我希望在点击它时选择它。只有那样。 – Vringar

+0

当你点击你的输入添加属性这里的自动对焦是自动对焦如何添加为属性的参考http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autofocus –

addEventListener回调引用应该没有参数。

.addEventListener('click', SelectAll)

通过添加(bla),它实际上是被称为SelectAll(bla)(element),这是不是你想要的。

试试这个:

$("#bla").click(function() { 
    bla.addEventListener('click',SelectAll(bla),false);  
    }); 
function SelectAll(element){ 
    element.focus(); 
    element.select(); 
    console.log(element); 
} 
+0

这使用jQuery,我正在积极尝试避免任何形式的框架。 – Vringar

+1

这并没有解决问题,它使情况更糟糕。除了添加jQuery之外,您的所有代码都会添加一个jQuery点击绑定,该点击绑定会添加用JavaScript编写的原始点击绑定,但仍然存在与原来相同的问题。另外,每次点击时,您的jQuery绑定都会执行,并添加另一个点击绑定。 – Nope

总结我的研究得出以下consclusions:因为它传递的事件,以功能

addEventListener回调引用应该没有参数。

因此实施listener的正确方法是.addEventListener('click', SelectAll, false)

由于event已通过,但您希望使用实际的element,您将需要使用bar.target来访问它。