我目前正在通过前端 Web 开发在线课程学习 jQuery。我的网页上有一个文本区域,但由于使用 jQuery,我无法在文本区域中键入或单击。我知道问题出在 jQuery 代码上,因为当我删除 HTML 中 JavaScript 的链接时,文本区域工作正常。我不知道到底是什么导致了 jQuery 中的问题。我将把代码放在下面。
$(document).ready(function(){
var el = document.getElementById('text');
console.log($('.submenu a').first().text());
console.log($('.submenu a').last().text());
$(document).on('contextmenu', function(){
return false;
});
$(document).on('mousedown', function (event){
event.preventDefault();
if(event.which == 3){
$('.hidden').removeClass('shown');
if ($(event.target).is('img')){
$('.saveimg, .newtab').addClass('shown');
} else if ($(event.target).is('a')){
$('.newtab').addClass('shown');
}
console.log(event.pageY, event.pageX);
$('#context').css({
top: event.pageY,
left: event.pageX
});
$('#context').fadeIn();
return false;
}
$('#context').fadeOut();
})
$('a[href="https://google.com"]').on('click', function(event){
console.log("Linking to Google?");
return true;
});
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu = $(this).parent().find('.submenu');
submenu.fadeIn(350);
$('.profile-menu').on('mouseleave', function(){
submenu.fadeOut(350);
});
});
$('#prepend, #append, #replace').on('click', function(e){
e.preventDefault();
var el = $(e.currentTarget);
var action = el.attr('id');
var content = $('.text').val();
if(action == "prepend"){
console.log("Prepending...");
$('#main').prepend(content);
}
else if(action == "append"){
console.log("Appending...");
$('#main').append(content);
}
else if(action == "replace"){
console.log("Replacing...");
$('#main').html(content);
};
$('.text').val('');
});
$('textarea').focusin(function(){
console.log("Focused in on the textarea");
});
});
您有一个事件设置为在整个文档的
mousedown
上发生,并且在该事件处理函数内您可以调用 preventDefault()
来阻止其他事件触发。由于 <textarea>
位于文档内部,因此会触发文档的 mousedown
事件而不是 textarea 事件。检查这个小提琴以获取更多信息:
$(document).ready(function () {
var el = document.getElementById('text');
console.log($('.submenu a').first().text());
console.log($('.submenu a').last().text());
$(document).on('contextmenu', function () {
return false;
});
$(document).on('mousedown', function (event) {
event.preventDefault();
$("#events_feedback").html("Wow! I clicked on the document!");
})
$('a[href="https://google.com"]').on('click', function (event) {
console.log("Linking to Google?");
return true;
});
$('[data-trigger="dropdown"]').on('mouseenter', function () {
var submenu = $(this).parent().find('.submenu');
submenu.fadeIn(350);
$('.profile-menu').on('mouseleave', function () {
submenu.fadeOut(350);
});
});
$('#prepend, #append, #replace').on('click', function (e) {
e.preventDefault();
var el = $(e.currentTarget);
var action = el.attr('id');
var content = $('.text').val();
if (action == "prepend") {
console.log("Prepending...");
$('#main').prepend(content);
} else if (action == "append") {
console.log("Appending...");
$('#main').append(content);
} else if (action == "replace") {
console.log("Replacing...");
$('#main').html(content);
}
;
$('.text').val('');
});
$('textarea').focusin(function () {
console.log("Focused in on the textarea");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p id="events_feedback">This is a test feedback from JS events.</p>
<textarea id="my_textarea"></textarea>
</body>
</html>
请注意,如果您在
event.preventDefault()
上评论 $(document).on('mousedown'...)
,textarea
活动就会开始工作。