必须有一个元素可见,以便加载"事件监听器工作?

时间:2015-12-15 13:20:02

标签: javascript event-handling opera addeventlistener image-loading

在我的文档中,有两个svg图像:预览和结果。基于预览图像计算结果图像;我通过添加/删除类hidden-display来切换它们,这会受到css的影响:

.hidden-display {
display: none;
}

这似乎运作良好。

在计算结果图像时,我想隐藏预览图像并仅显示进度条;加载结果图像后,我希望它显示并隐藏进度条。这是有效的代码;特别注意函数showResult()的两次出现:

function resultImageLoaded(event) {
    console.log("Inside add event listener function");
    resultImage.removeEventListener("load", resultImageLoaded, false);
    //showResult();    // Doesn't work if uncommented
    hideProgressBar();
    console.log("End event listener");
}

function submitChanges() {
    showProgressBar();

    var inputData = getInputString();
    var uri = "./ResultImage.cshtml?inputData=" + encodeURIComponent(inputData);

    resultImage.data = uri;
    resultImage.addEventListener("load", resultImageLoaded, false);

    hidePreview();
    showResult();    // Doesn't work if commented out
}

问题:虽然上面的代码有效,但它并没有完全符合我的要求:它会隐藏预览,显示结果,然后才会调用事件监听器函数,这会隐藏进度条。

如果我在函数showResult()中注释submitChanges()并在事件侦听器函数中取消注释它,则永远不会调用侦听器函数resultImageLoaded(event) - 这可能意味着结果图像永远不会被加载。这让我怀疑隐形元素不会触发“负载”。事件听众,但这看起来很奇怪。

我在两个浏览器中测试了这个--Internet Explorer 11和Opera 33.0。在IE中,一切都按预期工作,并调用事件监听器,但在Opera中我遇到了上述问题。

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

根据我们的讨论,$query = $this->db->get_where('mvc_user', array('email' => $email, 'password', $password));正在解决事件问题。 以下是解决第二个问题UI间距的示例。



$this->db->where('email',$email);
$this->db->where('password',$password);
$query = $this->db->get('mvc_user');

visibility:hidden

function registerEvent() {
  document.getElementById("test").addEventListener("click", function() {
    console.log("Test");
  });
}

function addClass(str) {
  document.getElementById("test").className = str;
}




希望它有所帮助!

答案 1 :(得分:1)

事实上,在Opera中,无法在display:none的节点上注册事件。由于使用可见性可能很容易弄乱格式化,因此可能是一个不透明的解决方案,如:

.hide {
  opacity: 0;
  z-index: -20;
}

.show {
  opacity: 1;
  z-index: -1;
}

只需在要显示/隐藏的div上切换这两个类。如果用户需要与显示的div中的某些内容进行交互,则必须添加z-index(如上所述)。这也开启了添加一些不错过渡的可能性。