如何解决JavaScript及Preloader阻塞ASP.NET按钮的问题？

我来帮你梳理下问题根源，以及对应的解决方案：

1. 重复加载jQuery引发的冲突 #

你代码里先加载了谷歌CDN的jQuery 1.12.4，紧接着又用document.write加载了本地的jQuery版本——这会直接覆盖之前的jQuery实例，导致后续的Bootstrap、Preloader脚本出现异常，甚至会干扰ASP.NET服务器控件的事件触发逻辑。

解决方法：移除重复的jQuery加载行，保留其中一个即可（推荐保留CDN版本，加载速度更快）：

<!-- 删掉这行重复的jQuery加载代码 -->
<!-- <script> document.write('<script src="/dizin/dosyalar/bs/js/vendor/jquery.min.js"><\/script>')</script> -->

2. Preloader层隐形阻挡按钮点击 #

你的#preloader是全屏加载层，即使通过fadeOut让它变透明，默认情况下它依然会占据整个屏幕区域，阻挡下方的按钮点击（透明不等于元素消失，它还是会拦截点击事件）。

解决方法：在fadeOut的回调函数中，彻底隐藏或移除加载层，确保它不再干扰按钮：

// 用更规范的$(window).on('load')替代$(window).load()
$(window).on('load', function() {
  $('#status').fadeOut();
  $('#preloader').delay(350).fadeOut('slow', function() {
    // 回调中设置display:none，彻底移除元素的占位
    $(this).css('display', 'none');
    // 或者直接删除元素（更彻底的方式）
    // $(this).remove();
  });
  $('body').delay(350).css({'overflow':'visible'});
});

同时检查你的Preloader CSS，确保它的定位和层级设置正确：

.gnl-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 根据你的页面风格调整背景色 */
  z-index: 9999; /* 确保加载层在所有内容之上 */
}

3. 优化脚本执行时机（可选） #

$(window).load()会等待所有资源（包括图片、视频）加载完成后才执行，如果你页面资源较多，用户可能在Preloader消失前就点击按钮，导致无效操作。如果你的Preloader只是用来等待DOM加载完成，可以改用$(document).ready()，它会在DOM结构加载完成后就执行隐藏逻辑：

$(document).ready(function() {
  $('#status').fadeOut();
  $('#preloader').delay(350).fadeOut('slow', function() {
    $(this).css('display', 'none');
  });
  $('body').delay(350).css({'overflow':'visible'});
});

4. 验证ASP.NET按钮的事件绑定 #

最后检查你的ebulten_OnClick服务器端方法是否存在逻辑错误，同时排查页面中是否有其他JavaScript代码阻止了按钮的默认点击行为（比如使用event.preventDefault()或return false）。

修改后的完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/dizin/dosyalar/bs/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
  $('#status').fadeOut();
  $('#preloader').delay(350).fadeOut('slow', function() {
    $(this).css('display', 'none');
  });
  $('body').delay(350).css({'overflow':'visible'});
});
</script>
<style>
.gnl-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}
</style>
<div class="gnl-loading" id="preloader"></div>
<asp:ImageButton ID="ebulten" runat="server" OnClick="ebulten_OnClick" CssClass="btn btn-default footerbtn" ImageUrl="/dizin/site/img/index/btn.png" />

内容的提问来源于stack exchange，提问作者Umut Eskitoğlu