javascript - 如何通过jQuery引用扩展的Highslide对象

我正在尝试创建一个小的功能，该功能将允许用户单击网页上的任意位置以关闭通过highslide创建的展开图像。弹出的错误是图片无法完全展开时，您可以选择将其展开为完整大小或将其保留在浏览器的范围内，但是，我的highslide元素在发生任何click事件时都会触发关闭。我想出了这项工作，但仍然存在一些问题。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="/hs/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="/hs/highslide/highslide.css" />


<script type="text/javascript">
var mState=false;
$(document).click(function() {
  hs.Expander.prototype.onMouseOver = function() {
    mState = false;
    console.log('over') };
  hs.Expander.prototype.onMouseOut = function() {
    mState = true;
    console.log('out')  };
  console.log(mState);
  if (mState) hs.close();
}); </script>

<a href="/pub/opdc/p0000/tall.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/pub/opdc/p0000/tall_t.jpg" alt="Highslide JS" align="right"></a>

我只是在学习Java脚本/ jQuery和highslide，所以对不好的做法表示歉意。 Console.log仅用于调试，将被删除。

我的问题具体如下。我想通过jQuery引用扩展的highslide图像，因此我不必使用highslide的鼠标事件。我发现它们是不可预测的，并且我现在没有时间确切地说明它们的工作方式以及为什么我没有看到想要的结果。

希望一切都有意义，在此先感谢您提供的所有协助。

最佳答案

也许我缺少了一些东西，但我不明白为什么您要重新发明轮子。 Highslide JS已经内置了此功能。如果将调光不透明度设置为任何非零值，则单击页面上的任意位置将关闭扩展器。

<script type="text/javascript">
   hs.dimmingOpacity = 0.75;
</script>
<style type="text/css">
.highslide-dimming {
    background: black;
}
</style>

如果您实际上不希望背景变暗，则只需将值设置为0.0001。

关于javascript - 如何通过jQuery引用扩展的Highslide对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38531356/